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本 书 以 项 目 驱 动 为 守则 , 御 厅 潮 进 、 案 例 丰 周 , 诗 细 介 绍 了 微 信 小 程序 的 入 门 基 础 知识 与 使 用 技巧 。 全 
书 共 包含 20 草 ,每 章 均 以 项 目 为 驱动 ,将 币 信 小 程序 的 基础 知识 点 分 解 实现 。 全 书 案 例 由 浅 入 深 , 从 入 门 篇 
的 创建 第 一 个 微 信 小 程序 开始 ,到 应 用 篇 的 各 类 API 的 实现 ,包括 天 气 查询 .口述 校 史 . 电 子 书 橱 、 医 疗 急救 
卡 .会 议 邀 请 函 、 指 南 针 和 手绘 时 钟 等 项 目 ; 在 游戏 篇 还 包含 了 拼图 、 推 种 子 和 贪 吃 蛇 游 戏 ; 在 提 融 篇 引信 了 
小 程序 云 开发 的 概念 ,例如 市 有 云 数 据 库 的 局 校 新 闻 网 、. 市 有 云 存 储 的 电子 书 枉 ; 最 后 在 综合 裔 给 出 图 片 分 


于 社区 案例 ,介绍 了 第 三 方 Vant Weapp 组 件 库 , 并 结合 云 开 发 搁 术 实现 了 生日 害 家 小 程序 。 
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本 书 以 项 目 驱 动 为 守则, 循序渐进、 案例 丰 宣 ,详细 介绍 了 微 信 小 程序 的 入 门 基 础 知识 与 
使 用 技巧 。 

全 书 共 包 含 20 章 , 可 分 为 以 下 6 个 部 分 : 

第 一 部 分 是 入 门 篇 ,包括 第 1 昔 和 第 2 章 。 其 中 第 1 章 是 开发 前 的 准备 ,详细 讲解 如 何 注 
册 开 发 者 账号 和 完善 信息 ,以 及 开发 工具 的 下 载 与 安装 ; 第 2 章 是 第 一 个 微 信 小 程序 ,从 零 开 
始 讲解 如 何 新 建 项 目 、 真 机 预览 调试 等 操作 ,并 基于 该 项 目 介 绍 自 动 生 成 和 手动 创建 小 程序 项 
目的 方式 。 

第 二 部 分 是 基础 篇 ,包括 第 3 曹 和 第 4 章 。 其 中 第 3 章 是 小 程序 框架 ,以 列表 和 九宫 格 两 
种 布局 为 例 ,讲解 小 程序 如 何 使 用 flex 布局 进行 页 面 规划 ; 第 4 昔 是 小 程序 组 件 ,以 猜 数 字 小 
游戏 为 例 ,介绍 表单 中 文本 输入 框 按钮 等 组 件 的 用 法 。 

第 三 部 分 是 应 用 篇 ,包括 第 5 章 一 第 11 章 。 这 7 个 章节 分 别 应 用 微 信 小 程序 中 的 网 络 
API、 媒体 API、 文 件 API、 数 据 API.\ 位 置 API\` 设备 API 以 及 界面 API, 每 个 API 均 对 应 一 个 
完整 的 项 目 实例 ,包括 天 气 查 询 .口述 校 史 .电子 书 橱 、 医 疗 急救 卡 会议 邀请 困 ,指南 针 和 手绘 
时 钟 。 

第 四 部 分 是 游戏 篇 ,包括 第 12 章 一 第 14 章 。 这 3 个 章节 基于 画布 组 件 和 绘图 相关 API 
分 别 实现 简易 版 的 拼图 游戏 、 推 箱子 游戏 和 贪 吃 蛇 游 戏 。 

第 五 部 分 是 提高 篇 ,包括 第 15 章 一 第 18 章 。 其 中 第 15 章 综 合 应 用 之 前 所 学 的 小 程序 前 
端 知 识 开发 一 款 基 于 模拟 数据 的 高 校 新 闻 网 小 程序 ; 第 16 音 和 第 17 章 对 第 15 章 的 项 目 进 
行 改 造 ,第 16 间接 入 自行 搭建 的 服务 器 后 端 ,形成 全 栈 小 程序 ,第 17 草 引 入 云 开发 的 概念 , 直 
接 开 通 云 环境 即 可 快速 迭代 上 线 ; 第 18 章 对 第 7 章 的 电子 书 橱 项 目 进 行 改造 , 接 人 云 存 储 功 
能 ,可 以 更 方便 地 下 载 电子 书 。 

第 六 部 分 是 综合 篇 ,包括 第 19 章 和 第 20 章 。 其 中 第 19 章 是 对 全 套 云 能 力 的 综合 应 用 ， 
实现 多 用 户 的 图 片 分 享 社 区 ; 第 20 章 结 合 云 能 力 和 第 三 方 组 件 库 Vant Weapp 快速 搭建 美 
观 、 大 方 的 UI 界面 ,实现 一 款 生 日 管家 小 程序 。 

本 书 有 如 下 几 个 特点 : 

(1) 知识 全 面 ,循序 渐进 。 

本 书 首先 介绍 一 些 基于 小 程序 框架 和 组 件 的 基础 项 目 , 帮 助 读者 打 好 基本 功 ; 然后 正式 
进入 小 程序 各 类 应 用 API 的 相关 项 目 介绍 ,让 读者 有 针对 性 地 逐步 巩固 常用 小 程序 API 的 用 
法 ; 接着 介绍 3 球 小 游戏 项 目 , 让 读者 对 未 来 小 游戏 的 开发 学 习 打 下 基础 。 在 提高 篇 补充 全 
栈 开 发 和 云 开 发 技术 ,读者 可 以 根据 实际 情况 自行 选择 使 用 第 三 方 服务 器 或 云 数 据 库 进行 快 
速 开 发 。 最 后 提供 两 个 综合 项 目 实例 ,让 读者 进一步 提高 对 于 知识 的 综合 应 用 能 力 。 


/ 


(2) 项 目 驱 动 ,实用 性 强 。 

全 书 前 11 曹 将 主教 材 各 章节 的 知识 点 融 人 综合 项 目 案例 中 ,帮助 读者 更 好 地 理解 所 学 知 
识 。 第 12 章 一 第 20 章 额 外 提供 了 游戏 开发 .全 栈 开 发 . 云 开 发 和 第 三 方 UI 组件 的 应 用 ,具有 
较 强 的 实用 价值 ,也 适合 培养 读者 的 动手 能 力 。 

(3) 步 又 详细 ,多 于 理解 。 

本 书 思路 清晰 ,知识 点 循序 渐进 展开 ,每 章 的 项 目 案例 均 分 步骤 讲解 ,读者 可 以 看 到 从 界 
面 设计 开始 到 样式 美化 以 及 功能 逻辑 完成 的 整个 变化 过 程 。 读 者 跟着 每 章 综合 案例 独立 完成 
开发 过 程 , 即 可 达到 小 程序 前 端 开发 的 基本 要 求 。 

注 : 本 书包 含 21 个 完整 项 目 业 例 , 均 在 微 信 web 开发 者 工具 (目前 最 新 版 本 为 v1. 02. 
1906141) 和 真 机 中 调试 通过 。 本 书 提供 1600 分 钟 的 视频 讲解 ,扫描 书 中 相应 章节 的 二 维 码 可 
以 在 线 观 看 学 习 ; 本 书 还 提供 教学 大 纲 .教学 课件 、 期 末 试 卷 、. 课 后 拓展 作业 ,扫描 封底 的 课件 
二 维 码 可 以 下 载 。 

由 于 未 来 微 信 开发 工具 软件 版 本 升级 和 官方 文档 变更 等 原因 ,有 可 能 会 导致 您 在 学 习 时 
个 别 功能 无 法 正确 显示 ,如 遇 此 情况 请 扫描 下 方 二 维 码 查看 常见 问题 汇总 文档 ,我 们 将 会 定期 
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开 妈 前 的 准备 


本 章 内 容 主要 包括 开发 小 程序 项 目前 的 两 个 准备 工作 ,一 是 注册 小 程序 账号 ,二 是 小 程序 
开发 工具 部 署 。 在 注册 小 程序 账号 练习 中 ,主要 内 容 包 括 注册 开发 者 账号 .完善 小 程序 信息 和 
管理 小 程序 成 员 ; 在 小 程序 开发 工具 部 署 练习 中 ,主要 内 容 包 括 软 件 的 下 载 与 安 闻 、 开 发 者 工 
具 的 登录 和 账号 切换 方法 。 


。 掌握 开发 者 账号 的 注册 、 信 息 的 完善 和 成 员 的 管理 ; 
。 掌握 开发 者 工具 的 下 载 、 安 装 与 登录 。 


1.1.1 注册 开发 者 账号 


开发 者 首先 需要 在 微 信 公众 平台 上 注册 一 个 小 程序 账号 ,才能 进行 后 续 的 代码 开 发 与 提 
区 工作。 注册 步骤 如 下 : 

(1) 访问 微 信 公众 平台 官网 首页 (mp. weixin. gg. com) ,然后 单 击 右 上 和 角 的 “立即 注册 ” 按 
钮 进入 账号 类 型 选择 页 面 ,如 图 1-1 所 示 。 


院 ， 微 信 公众 平台 


再 小 的 个 体 ， 也 有 自己 的 品 陪 


忘记 帐号 或 密码 


(2) 在 当前 页 面 上 选择 注册 的 账号 类 型 为 “小 程序 ”, 即 可 进入 小 程序 的 正式 注册 页 面 ,如 
图 1-2 所 示 。 


请 选择 注册 的 帐号 类 型 


订阅 号 CY ss 


具有 信息 发 布 与 忧 播 的 能 力 具有 用 户 管理 与 提供 业务 服务 的 能 力 
适合 个 人 及 媒体 注册 适合 企业 及 组 织 注册 


-选择 此 类 型 
©@ 小 程序 ES 企业 微 信 


原 企 业 号 


具有 出 色 的 体 验 ， 可 以 被 便捷 地 获取 与 传播 具有 实现 企业 内 部 沟通 与 协同 管理 的 能 力 
适合 有 服务 内 容 的 企业 和 组 织 注册 适合 企业 客户 注册 


图 1-2 ”账号 类 型 选择 页 面 
(3) 小 程序 的 正式 注册 页 面包 含 3 个 填写 步骤 , 即 账号 信息 .邮箱 激活 和 信息 登记 。 


QQ 账号 信息 : 在 账号 信息 页 面 中 需要 填写 邮箱 .密码 、 确 认 密 码 、 验 证 码 并 勾 选 同意 协议 
条 款 , 如 图 1-3 所 示 。 


加 帐号 信息 加 ) 邮 精 激活 国 信息 登记 


每 个 邮 稻 仅 能 申请 一 个 小 程序 已 有 微 信 小 程序 ? 立即 登录 


邮 秆 testtest@qq.com 


作为 登录 帐号 ， 请 填写 未 被 微 信 公众 平台 注册 ,未 被 微 信 开放 平台 注册 ,未 被 
个 人 人 微 信和 号 缕 定 的 邮箱 


请 再 次 输入 密码 


“| 你 已 阅读 并 同意 《 邹 信 会众 平台 服务 协议 》 及 《 微 信 小 程序 平台 服务 条 加 》 


1-3 ”小 程序 账号 信息 页 面 
注意 该 图 中 所 填写 的 邮箱 地 址 必须 符合 以 下 条 件 : 


”未 用 于 注册 过 微 信 公 众 平台 ; 
”未 用 于 注册 过 微 信 开 放 平 台 ; 


。 未 用 于 绑 定 过 个 人 微 信号 的 邮箱 。 

此 外 ,需要 注意 每 个 邮箱 地 址 只 能 申请 一 个 小 程序 。 如 果 开 发 者 当前 暂时 没有 符合 条 件 
的 邮箱 ,建议 先 去 申请 一 个 新 的 邮箱 再 来 继续 小 程序 的 账号 注册 。 

全 部 填写 完成 并 勾 选 同意 协议 条 款 后 , 单 击 最 下 方 的 “注册 ”按钮 提交 账号 信息 。 

邮箱 激活 : 在 所 交 注 册 后 会 看 到 邮箱 激活 捉 醒 ,此 时 页 面 效 采 如 图 1-4 所 示 。 


全) 帐号 信息 加 邮箱 激活 国 信息 登记 


激活 公议 平台 帐号 
感谢 注册 ! 确 闪 邮件 已 发 送 圣 你 的 注册 郎 箱 : wxa 名 ] 二 .com,。 请 
进入 邮箱 宜 看 邮件 ， 并 激 汪 公众 平台 帐号 ， 


漫 有 收 到 邮件 ? 

1， 请 检查 邮箱 地 址 是 否 正 病 , 你 可 以 返回 重新 填写 。 
2、 检 查 你 的 电 件 垃 圾 苛 

3， 著 仍 未 收 到 确认 ， 请 尝试 重新 发 送 


1-4 邮箱 激活 提醒 
登录 对 应 的 注册 邮箱 查看 激活 邮件 ,如 图 1-5 所 示 。 


" 请 激活 你 的 微 信 小 程序 ” 月 户口 名 

发 件 人 :Welnintaeam=welxinieam 区 qd.com> | 证, [由 welxinteam 久 tancent.com 代 发 ， 帮助) 
收 作 人 :我 <wxtis 人 EP7@J3.com> | 

时 交 ;2018 年 02 月 05 日 22:53 (星期 一 ) 


公众 平台 


你 好 ， 
感谢 你 注册 微 信 小 程序 。 
vod 人 1 com。 请 点 击 以 下 链 接 激活 账号 ， 


如 果 以 上 链接 无 法 点 击 ， 请 将 上 面 的 地 址 复制 到 你 的 浏览 器 地 址 栏 进入 微 信 公众 平台 。 


Kero Zheng 


微 信 产品 经 理 


1-5 小 程序 激活 邮件 


单 击 邮件 正文 中 的 链接 地 址 会 跳 转 到 微 信 平台 页 面 完 成 账号 激活 。 

信息 登记 : 邮箱 账号 激活 完成 后 就 进入 了 信息 登记 页 面 ,如 图 1-6 所 示 。 

其 中 注册 国家 /地 区 保持 默认 内 容 “中 国 大 陆 ”, 然 后 根据 实际 情况 进行 主体 类 型 的 选择 。 
目前 小 程序 允许 注册 的 主体 类 型 共有 5 种 ,包括 个 人 .企业 、 政 府 、 媒 体 以 及 其 他 组 织 , 详 情 见 
表 1-1。 


DD 帐号 信息 名 邮箱 匮 活 加 信息 登记 


微 信 公 众 平 癌 致力 于 打造 真实 . 合法 、 有 效 的 互联 网 平台 。 为 了 更 好 的 保障 从 和 广大 柚 信 用 户 的 合法 可 葛 ， 请 你 认真 壤 写 下 八 记 信息 ， 
为 表述 方便 ， 本 服务 中 ，“ 用 户 ” 也 称 为 “开发 者 " 或 “你 ”， 


用 户 信息 登记 审 榨 通过 后 : 

1. 你 可 以 依法 享有 本 微 信 公 访 帐号 所 产生 的 权利 收益 ; 

2. 尺 将 对 本 微 信 公 众 相 号 的 所 有 行为 承担 全 部 责 性 ; 

3. 性 的 注册 信息 梅 在 法 律 苑 许 的 范围 内 向 油 信 用 户 展示 ; 

4. 人 民法 院 、 检 府 院 、 公 安 机 美 等 有 可 机 美 可 向 腑 讯 依法 调 取 你 的 注册 信息 等 . 


请 确 兴 你 的 微 信 公 太 帐号 主体 类 型 属于 政府 ， 挫 体 ， 企 业 、 其 由 组 织 、 个 人 ， 并 请 按照 对 应 的 类 别 进行 信息 登记 ， 
点 击 查 看 微 信 公众 平台 信息 登记 指引 。 


注册 国家 /地 区 中 图 大 陆 ~ 


主体 类型 如 何 选择 主体 类 型 ? 
个 人 企业 政府 谋 体 其 他 组 织 


个 人 浅 型 包括 : 由 目 然 人 注册 和 运 襄 的 公众 帐 叶 ， 
帐 器 能 力 ; 个 人 这 型 本 十 这 持 微 信 认 证 、 微 信友 付 束 高 级 接口 能 力 。 


1-6 ”小 程序 信息 登记 页 面 


表 1-1 小 程序 账号 主体 类 型 介绍 


账号 主体 类 型 解 释 
Tn 必须 是 18 岁 以 上 的 微 信 实名 用 户 , 并 且 有 具有 国内 身份 信息 
企业 企业 ,分支 机 构 .个 体 工 商户 或 企业 相关 品牌 
政府 国内 各 级 /各 类 政府 机 构 .事业 单位 .具有 行政 职能 的 社会 组 织 等 ,目前 主要 履 音 公 
和 安 机 构 ,和 沈 团 机 构 .司法 机 构 .交通 机 构 ,旅游 机 构 、 工 商 税 务 机 构 .市 政 机 构 等 
媒体 报纸 . 洒 兰 、 电视. 电台 通讯社、 其 他 等 
其 他 组 织 不 属于 政府 、 媒 体 、 企 业 或 个 人 的 其 他 类 型 


由 于 本 书 为 个 人 开发 者 小 程序 入 门 , 所 以 选择 “个 人 ”类 型 。 企业 类 型 账号 注册 需要 企业 
缴费 认证 ,而 政府 、 媒 体 或 其 他 组 织 账号 注册 需要 通过 微 信和 验证 主体 单位 的 身份 ,对 于 这 几 种 
类 型 暂 不 介绍 ,后 续 可 以 由 开发 者 自行 申请 这 些 主体 类 型 ， 

选择 “个 人 ”类 型 之 后 ,在 页 面 下 方 会 自动 出 现 主体 信息 登记 表单 ,如 图 1-7 所 示 。 

开发 者 需要 如 实 填写 身份 证 姓名 、 身 份 证 号 码 、 管 理 员 手机 号 码 ( 一 个 手机 号 码 只 能 注册 
5 个 小 程序 ) ,然后 单 击 “ 获 取 验 证 码 ” 按 钮 等 待 手机 短信 。 在 收 到 的 短信 中 会 提供 一 个 6 位 验 
证 码 , 如 图 1-8 所 示 。 

注意 验证 码 必须 在 10 分 钟 之 内 填写 ,否则 会 失效 ,需要 重新 获取 。 填 写 完成 后 在 下 方 的 
管理 员 号 份 验 证 芒 中 会 月 动 出 现 一 个 二 维 码 ,如 图 1-9 所 示 。 

此 时 需要 管理 员 用 本 人 微 信 扫描 页 面 上 提供 的 二 维 码 来 进行 身份 确认 。 这 种 验证 方式 是 
人 免费 的 ,不 会 扣 取 任何 费用 。 扫 码 后 手机 微 信 会 月 动 跳 转 到 微 信 验证 页 面 , 如 图 1-10 所 示 。 

检查 微 信 验证 页 面 上 所 显示 的 姓名 和 身份 证 导 码 ,确认 无 误 后 点 击 “ 确 定 ” 按 钮 会 提示 刁 
份 验证 成 功 , 如 图 1-11 所 示 。 

此 时 该 微 信 号 就 会 被 登记 为 管理 员 微 信号 ,并 且 计 算 机 端的 网 页 画面 也 将 同步 提示 “号 份 
验证 成 功 ”, 如 图 1-12 所 示 。 


如 何 选择 主干 类 型 ? 下 午 11:14 合子 来 48% 夯 上 


和 OO 6 
个 大 类 型 包 播 : 由 目 然 人 注册 和 | 运营 的 公众 帐号 。 1065907729063620011 
帐号 能 力 : 个 人 党 型 咎 趟 支持 微 信 认证 ， 微 信 支 付 及 高 级 接口 能 力 ， 
短信 /彩信 
今天 下 午 11:14 


【腾讯 科技 】 
681644 ( 微 信 公众 平 


信息 审 桩 成 功 后 身份 证 猴 各 不可 履 改 ; 如 果 名 字 和 包含 分 出 号 “” ,请 和 = 
gE 人 十 分 钟 内 有 


请 输入 您 的 身份 证 号 码 。 一 个 身份 证 导 码 只 能 注册 5 个 小 程序 ， 


请 输入 你 的 手机 冉 码 ,一 个 手机 髓 码 只 前 主 册 5 个 小 程序 . 


无 法 接收 验证 码 ? 
请 输 . 六 手机 短信 收 到 的 8 位 验证 码 


管理 员 身 份 验 证 。 “请 先 韦 写 管理 员 身 份 信息 


1-7 小 程序 信息 登记 页 面 图 1-8 小 程序 验证 码 短信 


如 何 选择 主体 类 型 ? 
个 人 企业 政府 媒体 其 他 组 织 


个 人 类 型 包括 : 由 自然 人 注册 和 运营 的 公众 帐号 ， 
帐号 能 力 : 个 人 类 型 罩 不 支持 微 信 认 证 、 微 信 支 付 及 高 级 接口 能 力 。 


主体 信息 登记 

身份 证 姓名 周志 .所 
信息 审核 成 功 后 身份 证 姓名 不 可 修改 ; 如 果 名 字 包 含 分 隔 号 “”， 请 匆 
省 略 , 


3 全 02198EEEL1082 
请 输入 您 的 身份 证 号 码 。 一 个 身份 证 号 码 只 能 注册 5 个 小 程序 . 


管理 员 手机 号 码 。 153 入 S2921 17 先 后 可 重 发 
请 输入 您 的 手机 号 码 ， 一 个 手机 号 码 只 能 注册 5 个 小 程序 。 


短信 验证 码 S01644 无 法 接收 验证 码 ? 
请 输入 手机 短信 收 到 的 6 位 验证 码 


请 用 管理 员 本 人 微 信 扫 摘 二 纵 码 。 本 验证 方式 不 
扣除 任何 届 用 。 注 册 后 ， 扫 码 的 微 信号 将 成 为 该 


图 1-9 管理 员 身 份 验证 栏 中 出 现 二 维 码 


下 午 11:17 下 午 11:18 


短信 验证 办 返回 关闭 bn 


微 信 小 程序 注册 身份 确认 
姓名 周 直 衣 
身份 证 号 ”34G9819Giaatd082 


。 风 击 人 确认， 周记 匡 将 作为 小 程序 的 管理 员 ， 


你 的 身份 已 验证 


” 册 定 不 做 与 的 任何 王孙 、 风 人、 深 作 ， 你 将 使 用 管理 员 的 身份 注册 微 信 小 程序 


和 运 昌 等 行为 均 将 代表 本 帐号 行为 ， 请 合法 、 


合理 地 谨慎 操作 。 \ 
腾讯 将 在 接收 到 人 人 民法 院 、 检 察 院 、 公 安 机 


关 等 调 取 要 求 时 ， 提 供 你 的 个 人 信息 。 


图 1-10 手机 微 信 验证 身份 确认 页 面 图 1-11 手机 微 信 验证 成 功 页 面 


居于 和 得 条 作为 小 程序 的 管理 员 ， 


图 1-12 ”管理 员 身 份 验 证 成 功 


然后 单 击 下 方 的 “继续 ”按钮 进行 下 一 步 ,系统 会 弹出 一 个 提示 框 让 开发 者 做 最 后 的 确认 ， 
如 图 1-13 所 示 。 


主体 信息 提交 后 不 可 修改 


主体 名 称 : 局 时 
主体 类型 : 个 人 


该 主体 一 经 提 人 艾 ， 梅 成 为 你 使 用 微 信 公众 平台 各 项 服务 与 功能 的 唯一 法 
律 主体 与 缔约 主体 ， 在 后 续 开 通 其 他 业务 功能 时 不 得 变更 或 修改 。 腾讯 
司 在 法 律 多 证 的 泡 围 内 疝 微 信用 户 展 示 何 的 注册 信息 ， 你 南 对 填写 货 料 
的 真实 性 、 合 法 性 、 准 确 性 和 有 效 性 承担 责任 ， 否则 腾讯 有 权 拒 绝 或 终 


图 1-13 主体 信息 确认 提示 框 


单 击 “ 确 定 ” 按 钮 完成 主体 信 ， 


信息 提交 成 功 。 
你 可 以 前 往 微 信 公众 平台 使 用 相关 功能 。 


前 往 小 程序 


图 1-14 信息 提交 成 功 提示 框 


明确 认 , 会 出 现 如 图 1-14 所 示 的 内 容 。 


当前 可 以 直接 单 击 * 前 往 小 程序 ?按钮 进入 小 程序 管理 页 面 , 此 时 账号 是 默认 登录 后 的 状 


态 , 可 以 直接 进行 小 程序 的 后 续 管 理工 作 , 如 图 1-15 所 示 。 


和 尚 坟 公认 平台 -1 小 程序 


小 程序 发 布 流程 
1 册 剖 晤 权 训 补充 小 淹 让 吉本 本 地 ,同名 际 、 图 款 ， 隐 放 竺 


由 称 序 开 居所 管理 
开 装 工具 下 衣 于 监考 工具 则 [生生 生 开 澳 和 上 全 : 普通 小 程序 开发 再 工具 -， 小 茵 二 开发 者 工具 
潭 各 于 监 客 尖 0 于 蚊 坦 ;井上 仆 


西汉 积 师 咯 得 开 率 襄 丙 页 面 识 性 PPUEHOAPD3SECIET ， 本 ER 由 生 弄 直 名 


内 古 和 二 拉面 国人 全 


先 二 识 由 人 码 ,各 后 捍 训 中 杆 ， 中 情 通 芝 拓 可 疾 太 


1-15 小 程序 管理 页 面 


EE] 可 以 商 栈 六 门 放 后 1 蓝 通 小 刘 序 1， 开间 六 弟 【 痢 通 中 三 序章 于 | ， 返 计 埋 入 有 区 需 熙 


现在 小 程序 的 账号 注册 就 全 部 完成 了 ,之 后 可 以 访问 微 信 公众 平台 (mp. weixin. qq. com ) 


手动 输入 账号 和 密码 登录 进入 小 程序 管理 页 面 。 


1.1.2 完善 小 程序 信息 
账号 注册 完成 后 还 需要 完善 小 程序 的 基本 信息 ,如 表 1-2 所 示 。 
表 1-2 ”小 程序 基本 信息 内 容 介绍 
填 写 内 容 填写 要 求 修改 次 数 
发 布 前 有 两 次 改名 机 会 ; 
| 需要 控制 在 4 一 30 个 字 : 神 
小 程 厅 名 称 terpenes a 两 次 改名 机 会 用 完 后 ,必须 先 发 
> 布 再 通过 微 信 认 证 改名 
片 格式 只 能 是 PNG、 BMP 、 JPEG、 JPG、GIF 中 
的 一 种 ,并 且 文 件 不 得 大 于 2MB。 注 意 ,头像 图 | 生 入 月 可 修改 5 次 


片 不 允许 涉及 政治 敏感 与 色情 内 容 。 图 片 最 后 
会 被 切割 为 圆 形 效果 


续 表 
填写 内 容 填写 要 求 修改 次 数 
字数 必须 控制 在 4 一 120 个 字符 ,介绍 内 容 不 得 
含有 国家 相关 法 律 ,法规 茶 止 的 内 容 
服务 类 目 分 为 两 级 ,每 一 级 部 必须 十 写 , 不 可 以 
小 程序 服务 类 目 为 空 。 服 务 类 目 不 得 少 于 1 个 ,不 得 多 于 5 个 。| 每 个 月 可 以 修改 1 次 
特殊 行业 震 要 额外 提供 人 资质 证 明 


注 登 : 一 个 中 文字 占 两 个 字符 。 


小 程序 名 称 

小 程序 名 称 的 长 度 需 要 控制 在 4 一 30 个 字符 ,其 中 一 个 中 文字 占 两 个 字符 。 在 小 程序 发 
布 前 有 两 次 改名 机 会 。 两 次 改名 机 会 用 完 后 ,必须 先 发 布 再 通过 微 信 认证 改名 。 

由 于 小 程序 名 称 不 允许 与 平台 内 已 经 存在 的 其 他 账号 名 称 重 复 , 所 以 在 填写 好 之 后 可 以 
先 自 测 一 下 是 否 符 合 要 求 , 单 击 右 侧 的 “检测 ”按钮 即 可 进行 验证 。 

如 果 该 名 称 已 经 与 其 他 公众 号 名 称 重 复 ,会 出 现 失 败 提 示 ,如 图 1-16 所 示 。 


小 程序 介绍 每 个 月 可 以 申请 修改 5 次 


微 信 4/30 | 


该 名 称 与 已 有 公众 号 名 称 重 复 ， 需 与 该 小 

程序 帐号 相同 主体 才 可 申请 ， 查 看 同名 帐 

号 。 如 果 你 认为 已 有 名 称 侵犯 了 你 的 合法 

帐号 名 称 长 度 为 4-30 个 字符 ， 一 个 中 文字 
等 于 2 个 字符 。 提 交 名 称 前 请 检测 名 称 是 否 
可 用 。 点 击 了 解 更 多 名 称 规则 


1-16 ”小 程序 名 称 检测 失败 提示 


如 于 该 名 称 没 有 被 占用 ,检测 后 会 显示 "你 的 名 宇 可 以 使 用 "字样 ,如 图 1-17 所 示 。 


i 14/30 
你 的 名 字 可 以 使 用 


帐号 名 称 长 度 为 4-30 个 字符 ， 一 个 中 文字 
等 于 2 个 字符 。 提 交 名 称 前 请 检测 名 称 是 否 
可 用 。 点 击 了 解 更 多 名 称 规则 


1-17 小 程序 名 称 检测 成 功 提示 


该 图 就 表示 该 名 称 允 许 使 用 , 接 下 来 就 可 以 上 传 图 片 了 。 

小 程序 头像 

小 程序 头像 也 就 是 小 程序 最 终 显示 的 logo 图 标 ,图片 最 后 会 被 切割 为 圆 形 效果 。 头 像 图 
片 的 格式 只 能 是 PNG .BMP JPEG JPG GIF 中 的 一 种 ,并 且 文 件 大 小 不 得 大 于 2MB。 注 意 ， 
头像 图 片 不 允许 涉及 政治 敏感 与 色情 内 容 。 头 像 图 片 每 个 月 可 修改 5 次 。 

单 击 "选择 图 片 ” 按 钮 即 可 选择 图 片 进行 上 传 , 如 图 1-18 所 示 。 

根据 官方 提示 ,建议 上 传 PNG 格式 的 图 片 并 且 图 片 尺 寸 为 144 像素 X144 像素 ,以 保证 
最 佳 效 果 。 

小 程序 介绍 

小 程序 介绍 可 以 由 开发 者 自由 填写 关于 小 程序 功能 的 描述 ,注意 介绍 内 容 不 得 含有 国家 


小 程序 头像 新 头像 不 多 许 涉及 政治 敏感 与 色情 ; 
图 片 格 式 必 须 为 : png,bmp,jpeg,jpggif ; 不 可 大 于 2M ; 建议 使 用 png 格 式 图 片 ， 以 
保持 最 佳 效果 ; 建议 图 片 尺寸 为 ]44px*144px 


选择 图 片 


1-18 小 程序 头像 上 传 


相关 法 律 、 法 规 禁止 的 内 容 。 小 程序 介绍 的 内 容 每 


这 是 一 段 小 程序 介绍 ， 请 读者 们 填写 自 
个 月 可 以 申请 修改 5 次 。 己 实际 需要 的 内 容 ， 注 意 字数 不 要 超标 
就 可 以 了 . 

小 程序 介绍 对 应 的 字数 必须 控制 在 4 一 120 个 字 
符 ,文本 框 市 有 目 动 检测 字数 的 功能 ,如 图 1-19 所 示 。 78/120 

小 程序 服务 类 目 请 确认 介绍 内 容 不 含 国家 相关 法 律 

上 法 规 禁 止 内 容 ,介绍 字数 为 4~120 
小 程序 服务 类 目 指 的 是 小 程序 主要 内 容 所 属 的 个 字 


服务 范围 。 特 殊 行 业 需 要 额外 提供 资质 证 明 。 服 务 
类 目 每 个 月 只 可 以 修改 1 次 。 
服务 类 目的 下 拉 表 单 分 为 两 级 ,每 一 级 都 必须 填写 ,不 可 以 为 空 ,如 图 1-20 所 示 。 


图 1-19 ”小 程序 介绍 


请 根据 小 程序 自身 的 功能 ， 正确 选择 服务 类 目 。 


服务 类 目 教育 


图 1-20 ”小 程序 服务 类 目的 二 级 选项 
如 果 有 多 个 服务 范围 需要 追加 ,可 以 单 击 右 侧 的 十 号 进行 添加 ,如 图 1-21 所 示 。 


请 根据 小 程序 目 身 的 功能 ， 正 确 选 择 服务 类 目 。 


服务 类 目 。 请 选择 ~ 


图 1-21 小 程序 服务 类 目的 追加 


如 果 需 要 去 掉 多 余 的 服务 范围 ,将 鼠标 移动 到 需要 删除 的 服务 类 目 上 ,然后 单 击 右 侧 出 现 
的 一 号 进行 删除 ,如 图 1-22 所 示 。 


[二 


Ia 


请 根据 小 程序 目 身 的 功能 ， 正 确 选择 服务 类 目 。 


服务 类 目 请 选择 v 请 选择 


服务 类 目 请 选择 


服务 类 目 请 选择 


图 1-22 小 程序 服务 类 目的 删除 


全 部 填写 完毕 后 ,就 可 以 单 击 最 下 方 的 “提交 ”按钮 提交 小 程序 的 基本 信息 ,完成 后 可 以 看 
到 如 图 1-23 所 示 的 界面 。 


小 程序 发 布 流程 


step 


小 程序 信息 ”补充 小 程序 的 基本 信息 ， 如 名 称 ， 国 标 、 摘 i 述 等 


小 程序 开发 与 管理 


开发 工具 下 载 开 发 者 工具 进行 代码 的 开发 和 上 传 ; 昔 通 小 程序 开发 者 工具 。 小 游戏 开发 者 工具 
添加 开 点 者 添加 开 点 者 ， 进 行 代码 上 传 


配置 服务 器 ”在 开发 设置 页 面 查 看 APPID 和 Appsecret ,配置 服务 各 域名 
帮助 立 档 可 以 阅读 入门 介绍 | 普通 小 程序 ) 、 开 发 立 档 | 普通 小 程序 小 着 戏 ) 、 设 计 规 范 和 运营 规范 


版 本 发 布 先 提 交代 码 ， 然 后 提交 审核 ， 审 核 通过 后 可 发 布 


图 1-23 小 程序 信息 填写 完成 
此 时 就 可 以 单 击 “ 添 加 开发 者 ”按钮 进行 小 程序 成 员 的 管理 了 ，。 


1.1.3 管理 小 程序 成 员 


除了 管理 员 以 外 ,还 可 以 为 小 程序 追加 其 他 项 目 成 员 。 具 有 管理 员 身 份 的 开发 者 登录 后 
可 以 在 小 程序 管理 后 台 统 一 管理 项 目 成 员 ,并 为 他 们 分 别 设置 对 应 的 权限 。 

成 员 类 型 说 明 

管理 员 可 以 为 小 程序 添加 开发 者 .体验 者 以 及 其 他 权限 的 项 目 成 员 。 

项 目 成 员 可 以 被 分 配 的 不 同 权 限 如 下 。 

。 开发 者 : 可 以 使 用 微 信 web 开发 者 工具 进行 小 程序 开发 ,也 可 以 预览 开发 版 小 程序 在 
手机 端的 效果 ; 
体验 者 : 可 以 在 手机 端 使 用 体验 版 小 程序 ; 
。 登录 : 无 须 管理 员 确 认 即 可 登录 小 程序 管理 后 台 ; 
数据 分 析 : 可 以 使 用 小 程序 数据 分 析 功 能 查看 小 程序 数据 ; 
。 开发 管理 : 拥有 小 程序 提交 审核 .发布 和 回 退 权限 ; 


。 开发 设置 : 拥有 设置 小 程序 服务 器 域名 、 消 息 推 送 以 及 扫描 普通 链接 二 维 码 打开 小 程 
序 的 权限 ; 

。 暂停 服务 设置 : 拥有 暂停 小 程序 线 上 服务 的 权限 。 

成 员 人 数 限 制 


个 人 类 型 的 小 程序 允许 管理 员 添 加 15 个 开发 者 ,其 中 5 个 开发 者 、10 个 体验 者 。 其 他 类 
型 的 小 程序 开发 者 的 数量 限制 如 下 。 

。 未 认证 未 发 布 组 织 类 型 . 30 人 ; 

。 已 认证 未 发 布 /未 认证 已 发 布 组 织 类 型 : 60 人 ; 


。 已 认证 已 发 布 组 织 类 型 : 90 人 。 

成 员 变更 说 明 

每 个 小 程序 的 管理 员 与 项 目 成 员 都 是 允许 变更 的 。 需 要 注意 的 是 ,每 个 微 信 号 作为 项 目 
成 员 最 多 可 以 参与 到 50 个 小 程序 中 。 


在 完成 了 准备 工作 之 后 就 可 以 进行 小 程序 开发 了 。 小 程序 具有 官方 提供 的 专属 开发 工 
具 一 一 微 信 web 开发 者 工具 。 


1.2.1 软件 的 下 载 与 安装 


开发 者 登录 小 程序 管理 页 面 后 台 ,然后 单 击 右 上 角 菜 单 栏 中 的 “开发 ”选项 即 可 切换 到 小 

程序 开发 工具 的 下 载 页 面 ,也 可 以 直接 通过 URL 地 址 访问 下 载 页 面 ,例如 : 
https://mp. welxin. qq. com/ debug/ wxadoc/ dev/ devtools/ download. html 

在 该 页 面 中 需要 根据 月 己 计算 机 的 操作 系统 的 类 型 选择 对 应 的 下 载 地 址 。 目 前 提供 的 
3 种 下 载 地 址 与 计算 机 操作 系统 对 应 的 关系 如 下 。 

。 Windows 64，Windows 64 位 操作 系统 ; 

。 Windows 32: Windows 32 位 操作 系统 ; 

。 Mac: Mac 操作 系统 。 


以 Windows 64 版 本 为 例 , 下 载 完 成 后 会 获得 一 个 EXE 应 用 程序 文件 ,如 图 1-24 所 示 。 


1-24 微 信 web 开发 者 工具 的 安装 文件 


该 图 中 的 “1. 02. 1801081” 为 软件 版 本 号 ,“_x64” 表 示 为 Windows 64 位 版 本 软件 。 读 者 
可 以 根据 文件 名 上 髓 次 确认 是 否 下 载 了 正确 的 版 本 。 
确认 无 误 后 可 以 双击 该 文件 进行 开发 者 工具 的 安装 ,安装 过 程 如 图 1-25 所 示 。 
安装 完成 后 的 页 面 如 图 1-26 所 示 。 


1.2.2 开发 者 工具 的 登录 


微 信 web 开发 者 工具 要 使 用 开发 者 微 信 账号 登录 后 才 可 以 进行 小 程序 开发 。 

开发 者 身份 验证 

与 一 般 手 动 输入 账号 和 密码 的 流程 不 同 , 微 信 web 开发 者 工具 是 使 用 微 信 扫描 二 维 码 的 
方式 验证 开发 者 喘 份 。 在 计算 机 端 双 击 微 信 开 发 者 工具 图 标 ,会 弹出 微 信 开 发 者 工具 登录 页 
面 ,如 图 1-27 所 示 。 


微 信 小 程序 开发 实战 - 微 课 视频 版 


微 信 web 开 发 者 工具 1.02.1803210 安装 


欢迎 使 用 “ 微 信 web; ET 
1. 02. 1803210” 安 装 向 导 


1. 02. 1803210” 


EE , 恒 这 站 关 半 基地 所 有 应 用 各 底 。 过 拉 


人 广 小 回忆 将 指引 中， 计 是 和 言 yeb 开 点 痢 工具 


单 击 [下 一 步 W)]」 维 续 。 


， 取消 (C) 


(a) 进入 安装 同 导 


国 微 信 web 开 发 者 工具 1.02.1803210 安装 一 口 


许可 证 协议 
在 安装 “ 微 信 web 开 发 者 工具 1 02. 1803210” 之 前 ,请 阅读 授权 协议 。 国 


按 [PaDa] 阅读 "授权 协议 ”的 其 余部 分 。 
微 信 公 众 平台 开发 者 服务 协议 


歼 好 你 使 用 和 袜 信人 笃 从 平台 开 点 者 服务 ! 

为 合用 该 黄 服 务 ， 和 你 应 当 阅 读 并 遵 村 式微 信人 等 父 平 各 开 友 者 服务 协议 上 《以 下 商 
称 “ 本 协 说 ”) ， 以 及 长 腾 讯 服务 协 说 咎 、 攻 腾讯 微 信 和 软件 许可 及 服务 协 说 发 ， 
才 币 信和 公公 平台 服务 协 说 # 。 本 协 识 害 视 为 芯 腾讯 ,服务 协 认 并 及 喜 腾 讯 微 信 软 件 
许可 尽 服 务 协 说 间 的 补充 协 说 ， 是 其 不 可 分 割 的 组 成 部 分 ， 与 其 构成 统一 整体 。 

本 协议 与 上 述 自 奉 存在 冲突 外 书本 协 说 为 准 。 


ww 
Tir N= Rn TE T= 由 = gp ss ll. 


1 


1 上 一 步 (P) || 我 接受 区) | | 取消 虑 ) 
(b) 授权 许可 证 协议 


Ee 微 信 web 开 发 者 工具 1.02.1803210 安装 


难 择 安 某 伺 上 
选择 “* 微 信 web 开 家 者 工具 1. 02. 1803210” 的 安装 如 件 夹 。 


er 


目标 文件 来 
EFroaram Filas (x86)\Tencent'\ 人 WM 信 wab 开 不 考生 浏览 {8}..， | 


所 悉 空 间 : 445. DGE 
可 用 空间 : 47. 16B 


CE ER | [ 


(c) 选择 安装 位 是 
图 1-25 ” 微 信 web 开发 者 工具 的 安装 过 程 


SO 第 1 章 开发 前 的 准备 


微 信 web 开 发 者 工具 1.02.1803210 安装 。 - 


正在 安装 
“ 秽 信 web 开 点 者 工具 1.02. 1803210” 正在 安装 ， 请 等 候 ... 


抽取 : forInRieht. Js 


: flatten. }= 
: flattenleep, 15 
Hn : flattenDepth. js 
有 : flip. js 
: floor. js 
1: flow.]s 
: tlowRizht. 1s 
: forEach. js 
: forEachhizht. ]s 
: forIn. 1s 


《 上 一 步 (F)》 | 下 一 步 (N) 》 职 : 肖 (CC)》 


(d) 正在 安装 


图 1-25 ( 续 ) 


微 信 web 开 发 者 工具 1.02.1803210 安装 
安装 完成 


感 衣 你 司 用 视 信 wabk 开 发 者 工 且 1. 02. 1803210 


明 运 行 向 信 web 开 发 者 工 上 且 1.02. 1803210(R) 


请 使 用 微 信 扫 接 二 维 码 登 录 


¢ 上 一 步 (F) | 元 成 中， 取 滑 已 


图 1-26 ” 微 信 web 开发 者 工具 的 安装 完成 界面 1-27” 微 信 开 发 者 工具 登录 页 面 


开发 者 通过 用 手机 微 信 扫描 计算 机 端的 二 维 码 来 确认 身份 ,手机 端的 效果 如 图 1-28 

其 中 图 1-28(a) 为 点 击 手机 微 信 右上 和 角 的 加 号 出 现 的 下 拉 菜 单 , 点 击 其 中 的 “ 扫 一 扫 ” 选 项 
进行 二 维 人 码 扫描 ; 图 1-28(b) 为 扫 人 码 成 功 后 跳 转 的 提示 页 面 ,用 户 点 击 “ 确 认 登 录 ” 按 钮 即 可 登 
录 并 使 用 微 信 开发 者 工具 ，。 

在 这 个 过 程 中 ,计算 机 端的 页 面 变 化 如 图 1-29 所 示 。 

其 中 图 1-29(a) 为 手机 微 信 扫 码 成 功 后 出 现 的 提示 页 面 ,注意 该 二 维 码 是 动态 变化 的 ,并 
日 长 时 间 不 扫描 会 超时 过 期 ; 图 1-29(b) 显 示 的 表单 页 面 是 当 开 发 者 在 手机 微 信 上 上 点击“ 确认 
登录 ”按钮 后 才 会 出 现 的 ,此 时 就 可 以 正式 进行 小 程序 开发 了 。 


站 微 信 小 程序 开发 实战 - 微 


下 年 了 :5 各 


做 信和 登录 


侈 发 起 群 聊 
4 添加 朋友 
所 ， 扫 一 扫 是 否 确认 登录 微 信 web 开 发 者 工具 


调试 过 程 中 开 丰 者 可 通过 缚 定 公 以 号 著 得 你 的 相关 
六 十 去 品 Te 
-Y 收 付款 信息 


确认 登录 


取消 


| =3 时 所 
Fr i 
| ， 
rc | 
Es hi LET | 下 | ee 
. [EH 号 .. 2:53 
本 
是 Tr] 
本 = ss 
局 曙 面 所 
辣 : a 


济 工 宣 里 工 慷 训 概 


怖 现 


(a) 手机 微 信 “ 扫 一 扫 " 选项 (b) 扫 码 后 手机 微 信 出 现 确认 提示 
图 1-28 手机 微 信 扫 码 过 程 


微 信 开发 者 工具 


D 


扫 揪 成 功 


请 使 用 微 信 扫 挡 一 瞧 码 登录 


切 接 帐号 ， 


(a) 扫 码 成 功 的 提示 页 面 (b) 确认 登录 后 的 业 单 页 面 
1-29 ” 扫 码 确认 过 程 中 计算 机 端的 页 面 变 化 


开发 者 账号 切换 

微 信 开 发 者 工具 允许 在 同一 台 计 算 机 上 切换 不 同 的 开发 者 。 如 果 用 户 登 录 后 发 现 需 要 更 
换 账 号 ,可 以 选择 菜单 页 面 左 下 角 的 “注销 ”选项 回 到 二 维 码 扫 描 页 面 ,使 用 其 他 开发 者 微 信 账 
号 重新 扫 人 码 登 录 , 如 图 1-30 所 示 。 

第 2 章 将 正式 进行 小 程序 项 目的 创建 和 开发 。 


微 信 开 友 者 工具 


| | pl 


(a) 迄 择 “注销 ”选项 (b) 重新 回 到 二 维 码 扫描 页 面 
图 1-30 开发 者 账号 切换 


第 一 个 微 信 小 程序 


本 章 内 容 主要 包含 两 个 创建 小 程序 的 项 目 实例 ,一 是 使 用 快速 启动 模板 创建 小 程序 ,二 是 手 
动 从 零 开 始 创建 小 程序 。 这 两 个 项 目的 主要 功能 都 是 点 击 按钮 获取 当前 微 信 用 户 的 头像 和 昵称 。 
本 章 学 习 目 标 


。 学 习 使 用 快速 启动 模板 创建 小 程序 的 方法 ; 
。 学 习 不 使 用 模板 手动 创建 小 程序 的 方法 。 


O° 21 自动 生成 小 程序 


为 方便 初学 者 人 门 , 微 信 开发 者 工具 提供 了 人 快速 启动 模板 帮助 开发 者 目 动 生成 代码 ,从 而 
创建 完成 第 一 个 示例 小 程序 。 下 面 使 用 开发 者 工具 正式 创建 第 一 个 微 信 小 程序 。 


2.1.1 项 目 创建 


双击 微 信 开发 者 工具 图 标 , 管 理 员 或 开发 者 使 用 微 信 扫 摘 二 维 码 后 进入 
菜单 画面 。 选 择 菜单 中 的 “小 程序 ”选项 进入 小 程序 项 目 管理 页 面 ,如 图 2-1 
所 示 。 


小 游戏 


公众 号 网 页 项 目 


全 旗号 网 由 


小 程序 -二 开发 为 开发 青 提供 燥 据 库存 信和 三 全 类 等 完整 的 左 访 支持 ,无 堵 迭 
建 服务 露 ， 使 用 平台 提供 的 API 进行 槟 心 业务 开发 ， 即 可 实现 小 程序 快速 上 线 和 
千代 。 了 解 详情 


图 2-1 新 建 小 程序 项 目 


此 时 开发 者 依次 填写 项 目 名 称 、 目 录 和 AppID 就 可 以 新 建 一 个 小 程序 项 目 。 填 写 时 的 注 
意 事项 如 下 。 
。 项 目 名 称 : 由 开发 者 自 定 义 一 个 项 目 名 称 , 该 名 称 仅 供 开 发 者 工具 管理 使 用 ,不 是 小 
程序 被 用 户 看 到 的 名 字 。 
。 目录 : 项 目 文件 存放 的 路 径 地 址 ,可 以 单 击 输入 框 右 侧 的 箭头 按钮 在 计算 机 盘 符 中 选 
择 指 定 的 目录 地 址 。 该 地 址 可 以 由 开发 者 日 定义 。 
。 AppID: 管理 员 在 微 信 公众 平台 上 注册 的 小 程序 ID。 
其 中 小 程序 的 AppID 可 以 登录 微 信 公众 平台 (https://mp. weixin. qq. com) 查 看 ,有 
看 步骤 是 单 击 左 侧 菜 单 中 的 “开发 ”选项 ,切换 至 “开发 设置 ”面板 ,查看 “开发 者 ID” 下 方 的 
AppID( 小 程序 ID) ,如 图 2-2 所 示 。 


考 。 微 信 公 众 平台 | 小 程序 


开发 


运 维 中 心 开发 开具 接口 识 回 


图 2-2 查看 小 程序 ID 


将 该 小 程序 ID 复制 .粘贴 到 图 2-1 所 示 的 AppID 输入 框 中 。 
十 完 以 后 的 效 朱 如 图 2-3 所 示 。 


= 几 导入 项 目 


tmplDemo 
Emmademo workspaceitimplDemo 

| wx19079110a0iD01e8a 

车 无 ApplD 可 注册 

或 使 用 测试 导 

小 程序 

全 ”不 使 用 云 服务 

站 小 程序 -去 开发 

小 程序 . 云 开发 为 开发 者 提供 数据 库 、 存 储 和 云 函数 等 完整 的 云 诺 支持 。 无 需 拱 


建 服务 器 , 使 用 平台 提供 的 API 进行 核心 业务 开发 , 即 可 实现 小 程序 快速 上 线 和 
壬 代 。 了 解 详情 


腾讯 云 


图 2-3 小 程序 项 目 填写 效果 示意 图 


其 中 AppID 必须 填 实 际 的 小 程序 ID ,否则 部 分 功能 将 无 法 使 用 。 如 果 开 发 者 暂时 条 件 
受 限 无 法 注册 申请 小 程序 ID ,可 以 使 用 AppID 输入 框 下 方 的 “测试 号 ”来 体验 小 程序 。 

项 目 目录 选择 空白 文件 夹 tmplDemo, 则 开发 者 工具 会 默认 自动 生成 代码 形成 一 个 简单 的 小 
程序 效果 以 供 初学 者 入 门 学 习 。“ 后 端 服 务 ” 选 择 “ 不 使 用 云 服务 ”, 其 他 选项 保持 默认 不 变 。 

填写 完毕 后 单 击 “ 新 建 ”按钮 完成 操作 ,此 时 会 跳 转 到 开发 页 面 ,如 图 2-4 所 示 。 


上 2itmplDemo - 微 信 开 发 者 工具 RC v102.1906141 
项 目 文件 蜗 赋 工具 界面 设置 微 信 开 发 者 工具 


{} indexjson 
去 ndex waml 
ms Ndew Wss 
bk DO logs 
bk DD utils 
| 号 app.s 
{} app.json 
mas BPD.WSs 
{se} project.config json | 
[w Console Sources Network Security AppDats Audits 交 
BE @ | top “| Filter Default levels ™ 
Hello World T Thu Jun 27 2819 86:22:58 GMT+8866 (中 国标 准时 间 ) sitemap 索引 情史 提示 
| 总 ， 根据 sitemap 的 规则 [6]， 当 前 页 面 [pages/index/index] 将 被 索引 


和 


| 页 路 径 “pa 复制 打开 场 县 值 ”页面 参数 
图 2-4 小 程序 项 目 开发 页 面 
图 中 左边 就 是 手机 预览 效果 图 ,由 图 可 见 目前 能 显示 出 来 一 个 “获取 头像 昵称 ”按钮 和 一 


个 “Hello World” 文 本 ,这 与 手机 运行 的 效果 完全 相同 。 
用 户 可 以 直接 在 上 面 用 鼠标 左 键 单 击 来 模拟 手指 在 手机 屏幕 上 的 触 措 效 果 , 如 图 2-5 所 示 。 


LITLE Wechat 学 16:29 


Vechat 


/ 


微 信 授 权 


也 


代码 小 实验 四 请 著 得 以 下 权限 


误 得 条 的 公开 信息 i 天 和 、 此 黎 ， 地 区 县 
- 二 1 


ER} 


用 鼠标 左 键 单 击 此 按 钼 


Hello World Hells World 


(a) 用 鼠标 左 键 单 击 按钮 (b) 单 击 “允许 ”按钮 (c) 最 终 显示 效果 


图 2-5 小 程序 项 目 单 击 效果 


其 中 图 2-5(a) 显 示 的 是 用 鼠标 左 键 单 击 按钮 来 模拟 手机 上 的 触摸 点 击 效果 ; 图 2-5(b) 为 
单 击 之 后 弹出 的 微 信 授权 信息 ,只 有 单 击 “ 人 允许 ”按钮 才 可 以 获得 数据 ; 图 2-5(c) 为 最 终 显示 
效果 ,由 该 图 可 见 小 程序 项 目 已 经 成 功 地 获取 了 开发 者 头像 和 昵称 信息 。 


2.1.2 具 机 预 妮 


除了 可 以 直接 在 计算 机 端 使 用 鼠标 模拟 手机 和 触 屏 的 点 击 效 果 外 ,还 可 以 
直接 在 真 机 上 进行 程序 预览 。 用 鼠标 左 键 单 击 “ 预 览 ? 按 钮 , 即 可 上 月 动 生 成 一 
个 预 虎 二 维 码 ,如 网 2-6 所 示 。 

Tm 
| 本 本 EE 小 各 记 横 式 


4 模拟 局 ”办 朝 右 调 试 中 ”云天 性 
让 hone 有 ww 7756 ww WIFI 村 换 操 作 ~ 


= 及 | 。 扫 梯 一 雁 码 预览 | 雪 动 两 名 


周 小 风 外 上 屠 于 6.27 00-24 


te 
十 ra ap , 
i 


号 Console Sources Netwl 
四 © | top 中 

页 Thi Jun 27 2019 O80:22:58 GMT 
| 根据 sitemap 的 规则 [6e]， 沁 


| | i ndex. js :#1 
Hello World » Types "getuserinmo™, ce 小 程序 助手 ? 上 rR: fm 
» = | 
多 


页 而 路径。 pa.. 复制 打开 场 虽 简 ”页面 参 数 


图 2-6 ”小 程序 项 目 生成 预览 二 维 码 


此 时 用 手机 微 信 扫 描 图 2-6 中 的 二 维 码 即 可 进行 真 机 [i FR 
预览 ,如 图 2-7 所 示 。 Te 

由 图 可 见 ,画面 效果 基本 上 和 计算 机 端的 预览 图 一 
致 。 另 外 ,预览 所 用 的 二 维 码 不 是 永久 有 效 , 用 户 要 注意 
它 的 过 期 时 间 , 一 旦 过 期 需要 重新 单 击 “ 预 览 "按钮 生成 新 
的 预览 二 维 码 。 


2.1.3 完整 代码 展示 


说 明 : 本 项 目的 全 部 代码 都 是 由 开发 者 工具 自动 生成 
的 ,读者 暂时 不 需要 完全 理解 , 待 未 来 深入 学 习 后 再 回头 

配置 文件 展示 

完整 的 app. json 代码 如 下 : 


Hello Werld 


图 2-7 小 程序 项 目的 真 机 预览 效果 


1. 1{| 
7. "pages” : [ 
3. "pages/index/ index", 


4. "pages/logs/logs" 

5 ]， 

6 . Window : { 

了 . “ backgroundTextsStyle : 1ght ， 

8. "navigationBarBackgroundColor": "#FFF", 

9. "navigationBarTitleText": "WeChat", 

10. "navigationBarTextStyle : "black" 

11. Fr 

12. "sitemapLocation": "sitemap. json" 

13. } 

完整 的 app. wxss 代码 如 下 : 

1. /xx app.wxss x*x* / 

2 . Container { 

3 height: 100 委 ; 

4. display: flex; 

hs flex— direction: column; 

6 align ~ items: center; 

7 Justify— content: space— between; 

8 padding: 200rpx 0; 

9. box — sizing: border 一 box; 

10. } 

完整 的 app.js 代码 如 下 : 

1. //app.js 

2. Appl1 

e onLaunch: function() 1 

4. // 展 示 本 地 存储 能 力 

5 var logs = wx.getStorageSync('logs') || [] 

6. logs. unshift(Date. now( ) ) 

y wx. SetStorageSync( 'logs', logs) 

8. 

9. // 登 录 

10. wx. login( { 

11. success: res => { 

i2. // 发 送 res.code 到 后 台 换 取 openId,、sessionKey、unionId 
13. } 

14. }) 

15. // 获 取 用 户 信息 

16. wx. getSetting( { 

17. success: res => { 

18. if (res. authSettingl 'scope. userInfo']) { 

19. // 已 经 授权 ,可 以 直接 调用 getUserInfo 获取 头像 昵称 ,不 会 弹 框 
20. wx. getUserInfol( { 

21. success: res => { 

2 // 可 以 将 res 发 送 给 后 台 解 码 出 unionId 
23. this. globalData. userlnfo = Tes.UserInfo 
24. 

25. // 由 于 getUserInfo 是 网 络 请 求 ,可 能 会 在 Page. onLoad 之 后 才 返 
26. // 所 以 此 处 加 入 callback 来 防止 这 种 情况 
a, if (this.userInfoReadyCallback) { 

28. this. userInfoReadyCallback( res) 

29. } 

30. } 

J }) 

32. } 


34. }) 

35, 村 

36 . globalData: { 

37. UserInfo: null 

38. } 

39. }) 

公共 文件 展示 

完整 的 公共 JSCutilsy util. js) 代 码 如 下 : 

1. const formatTime = date => { 

2. const year = date.getFullYear() 

3. const month = date.getMonth() + 1 

4. const day = date. getDatel( ) 

5. const hour = date. getHours!() 

6. const minute = date. getMinutes() 

3 const second = date. getSeconds() 

8. 

9 . return [ year，month，day].map(formatNumber). join(/') + '' + [hour，minute， 
second|]. map(formatNumber). join( ": ") 

10. } 

11. 

12. const formatNumber = n =>{ 

13; n = n.toString{) 

14. returnn[l]?n:'0"+n 

15. } 

16. 

17. module.exports = { 

18. formatTime: formatTime 

19. } 


页 面 文件 展示 
1) index 页 面 
完整 的 WXML(pages/index/index. wxml) 代 码 如 下 : 


1]. < 一 一 lindex. wxml 一 一 > 

2. <View class = “Contaliner > 

E 四 < View class = userinfo'> 

4. < button wx:if = "{{!hasUserInfo && canIUse}}” open ~ type = “getUserInfo- 
bindgetuserinfo = "getUserInfo"> 获取 头像 昵称 </button> 

5. < block wx:else> 

6. < image bindtap = "bindViewTap class = "userinfo - avatar" src= "{{userInfo. 
avatarUrl}}" mode = "cover"></image > 

Ts < text class = "userinfo— nickname">{ {userInfo. nickName} }</text > 

8. </block > 

9 . </view> 

10. <view class = "usermotto"> 

11. < text class = "user ~ motto">{ {motto} }</text > 

12. </ View > 


13. </view> 
完整 的 WXSS(pages/index/index. wxss) 代 码 如 下 : 


1. /xx index.wxss *x* / 
2. .Userinfo { 
3, display: flex; 


flex— direction: column; 


align ~ items: center; 


.USerinfo ~ avatar { 
width: 128rpx; 
height: 128rpx; 
margin: 20rpx; 
border ~ radius: 50 委 | 


.Userinfo— nickname { 
color: 提 AAA:; 


| 


. Usermotto { 


margin ~ top: 200px; 


} 


完整 的 JS(pages/index/index. js) 代 码 如 下 : 


iD 0 直人 


人 
人 国生 


//index. js 
/7 获取 应 用 实例 
const app = getApp() 


Paget{ 
data: { 


} 


motto: 'Hello World", 

UserInfo: {}, 

hasUserInfo: false, 

canIUse: wx. canIUsel( 'button. open — type. getUserInfo') 


// 事 件 处 理 函 数 


bindViewTap: function() { 


}, 


wx. navigateTol { 
url: '../logs/logs' 
}) 


onLoad: function() { 


if (app. globalData. userInfo) { 
this. setDatal { 
UserInfo: app. globalData. userlnfo, 
hasUserInfo: true 
}) 
} else if (this. data. canIUse){ 


// 由 于 getUserInfo 是 网 络 请 求 , 可 能 会 在 Page. onLoad 之 后 才 返 


// 所 以 此 处 加 入 callback 来 防止 这 种 情况 
app. userInfoReadyCallback = res =>{ 
this. setDatal { 
userInfo: res. userlnfo, 
hasUserInfo: true 
}) 
} 
} else { 
// 在 没有 open 一 type = getUserInfo 版 本 时 的 兼容 处 理 
wx. getUserInfol( { 
success: res => { 
app. globalData. userInfo = res.userlnfo 


38. this. setDatal { 


39. UserInfo: res. userlnfo, 
40. hasUserInfo: true 

41. }) 

42. } 

43. }) 

44. } 

45. » 

46. getUserInfo: function(e) { 

47. console. log(e) 

48. app. globalData. userInfo = e. detail. userInfo 
49 . this. setDatal { 

50. userlnfo: e. detail. userInfo, 
< hasUserInfo: true 

52. }) 

53. } 

54. }) 


完整 的 JSON(pages/index/index. json) 代 码 如 下 : 


1 4 

2. "usingComponents" : {} 
3. 1} 

2) logs 页 面 


完整 的 WXML(pages/logs/logs. wxml) 代 人 码 如 下 . 


1l. <!—— logs.wxnml 一 一 > 

2. <view class= "container log— list"> 

EE <block wx:for= “"{{logs}} wx:for— item= “log > 

4. < text class = "log— item">{{index + 1}}. {{log}}</text > 
5. </block > 

6. </view> 


完整 的 WXSS(pages/logs/logs. wxss) 代 码 如 下 : 


.log— list { 
display: flex; 
flex— direction: column; 
padding: 40rpx; 
} 
. log — item { 
margin: 10rpx; 


} 
完整 的 JSCpages/logs/logs. js) 代 码 如 下 : 


DD 


onLoad: function() { 

this. setDatal { 
10. logs: (wx.getStorageSync('logs') || []).map(log =>{ 
11， return util. formatTime(new Datel( 10g)) 


1. //l1ogs.js 

2. const util = require('../../utils/util. js') 
3. 

4. Page({ 

5 data: { 

6 . logs: [| 

EE }, 

8. 

9 . 


12. }) 
kk }) 
14. )} 

15. }) 


完整 的 JSON(Cpages/logs/logs. json) 代 人 码 如 下 : 


{ 


必 kk 人 情 


在 熟悉 了 小 程序 的 目录 结构 和 微 信 开发 者 工具 的 基本 使 用 方法 后 ,读者 不 妨 尝 试 自己 动 


手 创建 第 一 个 小 程序 。 
2.2.1 项 目 创建 


"navigationBarTitleText": "查看 司 动 日 志 "， 
"usingComponents" : {} 


} 


本 项 目 创建 选择 空白 文件 夹 myDemo, 效 果 如 图 2-8 所 示 。 
此 时 仍然 会 自动 生成 模板 代码 ,2. 2. 2 节 将 介绍 如 何 手 动 修 改 页 面 配置 


文件 。 


2.2.2 页 面 配置 
对 创建 页 面 文件 


| myDemo 
EWwxdemo workspace\imyDemo 


wx19079110a0f01e8a 
著 无 ApplD 可 注册 
或 使 用 测试 号 
小 程序 
人 不 使 用 云 服务 
| 小 程序 - 云 开发 
建 服务 露 ， 使 用 平台 提供 的 API 进行 槟 心 业务 开发 ， 即 可 实现 小 程序 快速 上 绑 和 
逢 代 。 了 解 详情 
语言 JavaScript 


图 2-8 小 程序 项 目 填写 效果 示意 图 


项 目 创建 完毕 后 ,在 根 目 录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 


一 般 来 说 首页 默认 命名 为 index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 称 可 以 自 定义 。 
本 项 目 只 需要 保留 首页 (index) 即 可 。 
具体 操作 如 下 : 


(1) 将 app.json 文件 内 pages 属性 中 的 “pages/logs/logs 删除 ,并 删除 上 一 行 末 尾 的 
么 号 。 

(2) 按 快 捷 键 Ctrl 十 S$ 保存 当前 修改 。 

删除 和 修改 文件 

具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 *page” 找 到 第 二 个 选项 按 回 车 键 让 其 
日 动 补 全 陋 数 (如 图 2-9 所 示 )。 


index.Js 者 


1 fiindex .js 


Function 0 
‘rage 
WD EetCurrentPages 
全 > package 
~ pauseBackgroundAudio 
PP previewImage 
~ canvasPutImageData 


2-9 输入 关键 词 创建 Page 范 数 


(5) 删除 app. wxss 中 的 全 部 代码 。 
(6) 删除 app. js 中 的 全 部 代码 ,并 且 输 入 关键 词 *“app” 找 到 第 一 个 选项 按 回 车 键 让 其 自动 
补 全 函数 (如 图 2-10 所 示 )。 


app.|s 地 
1 fapp .js 


2 ap 
(TS function O 
[7 BD 


2-10 ”输入 关键 词 创 建 App 函数 


此 时 模板 代码 就 修改 完毕 了 , 如果 未 来 开发 者 还 想 创建 其 他 页 面 ,只 需 在 app. json 的 
pages 属性 中 追加 声明 路 径 即 可 自动 生成 对 应 的 页 面 文件 。 
2.2.3 视图 设计 

导 舱 栏 设计 


小 程序 默认 导航 栏 是 黑 底 日 字 的 效果 ,可 以 通过 在 app. json 中 对 
window 属性 进行 重新 配置 来 自 定义 导航 栏 效 果 。 更 改 后 的 app. json 文件 代 


1. 1 

2 pages : | 

3. "pages/ index/ index" 

4. ] ， 

5 "window : { 图 2-11 自 定义 导航 栏 效果 
6 . "navigationBarBackgroundColor": "#663399", 

"navigationBarTitleText": "手动 创建 第 一 个 小 程序 " 

8. } 

9. } 


上 述 代码 可 以 更 改 导 航 栏 背景 色 为 紫色 ,字体 为 白色 ,效果 如 图 2-11 所 示 。 
页 面 设计 
页 面 上 主要 包含 3 个 内 容 , 即 微 信 头像 、 微 信 上 昵称 和 “点 击 获取 头像 和 昵 
称 ” 按 钮 。 页 面 设计 图 如 图 2-12 所 示 。 
计划 使 用 如 下 组 件 。 
。 微 信 头像 : < image >( 图 像 ) 组 件 ; 
。 微 信 昵称 : < text>( 文 本 ) 组 件 ; 
。 按钮 : <button>( 按 钮 ) 组 件 。 
相关 WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 


1 <Vlew Class= ‘container'> 

2 < image ></ image > 

3. < text > Hello World </text > 

4 < button > 点 击 获 取 头 像 和 昵称 </button > 
5 


</view> 


相关 WXSS(pages/index/index. wxss) 代 码 片 段 如 下 ， 


1 . Container!{ 

p height: 100vh:; /* 高 100 视窗 ,这 里 写 100% 无 效 */ 
3. display: flex; /x* flex 布局 模式 x*/ 

4. flex— direction: column; /< 垂直 布局 关 / 

和 align— Items: center; /x* 水 平方 向 居中 x / 

6 Justify — content: space — around; /* 垂下 方 辐 分 散布 局 */ 

7. 1] 


当前 效果 如 图 2-13 所 示 。 

由 图 可 见 , 此 时 可 以 显示 文本 和 按钮 。 由 于 尚未 获得 头像 图 片 , 所 以 无 法 显示 内 容 。 可 以 
临时 使 用 本 地 图 片 代替 ,在 点 击 按钮 获取 微 信 头像 后 再 更 改 。 

在 项 目 中 新 建 自 定义 文件 夹 images 用 于 存放 图 片 , 右 击 此 文件 夹 ,选择 "硬盘 打开 ”, 将 本 
地 图 片 logo. png 复制 .粘贴 进去 等 竺 使用。 新 目录 结构 如 图 2-14 所 示 。 

修改 WXML 页 面 的 < image > 组 件 如 下 : 


< image src = '/images/l1ogo. png' mode = 'widthFix'></image > 
上 述 代 码 中 src 属性 用 于 指定 图 片 来 源 为 根 目 录 下 images 文件 夹 中 的 logo. png 图 片 ， 


mode 属性 表示 图 片 随 着 指定 的 宽度 目 动 拉 伸 高 度 以 显示 原 图 的 正确 比例 。 
在 WXSS 页 面 追加 < image > 和 < text > 组件 的 相关 样式 代码 如 下 : 


1. image { 

2 width: 300rpx; 

3. border — radius: 50$%,; 
4. |} 

5. text{ 

6b. font — size: 50rpx; 

7. } 


当前 页 面 效 朱 如 图 2-15 所 示 。 


微 信 头 像 


做 信 上 昵称 


2-12 页面 设计 图 


> 


* [SS images 
回 logo.png 
” [SS pages 
™ 区 index 
15 indaexjs 
{} index.json 
< >» index.wxml 
wss index.Wxss 
JS app.js 
{} appjson 
wrss app.wWxss 
{} project.config.json 


2-14 添加 图 片 文件 后 的 目录 结构 


/* 图 片 览 度 */ 


/*4 个 角 变 为 圆 角 形状 * / 


/* 字体 大 小 */ 


Hello World 


图 2-13 ”页 面 设计 图 


Hello World 


图 2-15 


页 面 效 果 图 


2.2.4 逐 竹 实现 


有 加 获取 微 信 用 户 信 息 
人 WXML 页 面 修改 < button > 组 件 的 代码 ,为 其 追加 获取 用 户 信 息 事 件 ， 


视频 讲解 


1. <button open— type= "getUserInfo'" bindgetuserinfo= 'getMyInfo'> 

2 点 击 获 取 头 像 和 昵称 

3. </button > 
其 中 open-type 王 getUserInfo' 表 示 激 活 获 取 微 信用 户 信 息 功 能 ,然后 使 用 bindgetuserinfo 属 
性 表示 获得 的 数据 将 传递 给 日 定义 函数 getMyInfo, 开 发 者 也 可 以 使 用 其 他 名 称 。 

在 JS 页面 的 Page() 内 部 退 加 getMyInfo 图 数 , 代 码 片 段 如 下 : 

1. getMyInfo: function(e) { 


console. log(e. detail. userInfo) 


保存 后 预览 项 目 , 如 果 点 击 按钮 后 Console 控制 台 能 够 成 功 输出 一 段 数 据 , 就 说 明 获 取 成 
功 , 如 图 2-16 所 示 。 


Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 


Filter Default levels ™ 


vv {nickName: "WH 起 ", gender: 2, Loanguage: "zh CN", city: "Wuhu", province: "Anhui", ..} 
avatarUrl: "https://wx.qlogo.cn/mmopen/vi_ 32108jaTwGTfTJeresqPDflrMTdlvXBIeibHxibxvMgnpco 
city: “Wuhu” 
country: "China™ 
gender: 2 
language: "zh_cN" 
nickName:“" 周 小 见 友 " 
province: "Anhui” 

pb proto : Object 


图 2-16 ”Console 控制 台 输 出 内 容 


23:07 


天 使 用 动态 数据 显示 头像 和 了 昵称 

在 WXML 页 面 修改 < image > 和 < text > 
pe 将 图 片 来 源 和 文本 内 容 使 用 双 
蓄 括 号 (4})) 做 成 动态 数据 ,代码 片段 如 下 : 


手动 创建 第 一 个 小 程序 


视频 讲解 


1. < image src = '{{src}}'mode = 'widthF ix 
'></image > 
+ <text>{{name} }</text > 
同时 修改 JS 文件 ,在 现 有 的 data 属性 中 追加 这 两 个 动 
态 数 据 的 值 ,使 其 仍然 可 以 显示 原先 的 内 容 。 人 代码 片段 Hallawana 
如 下 ， 
data: 1 点 击 获取 头像 和 昵称 
src:'/images/1ogo. png', 
name: 'Hello World' 


}, 2-17 页面 效 果 图 


Ss oo 捕 


完成 后 预 究 如 图 2-17 所 示 , 页 面 显示 效 来 不 会 发 生 改 变 。 


更 新 头像 和 昵称 

修改 JS 文件 中 getMyInfo 函数 的 代码 ,使 获取 到 的 信息 更 新 到 动态 数据 
1 getMyInfo: function(e) { 

2 let info = e. detail. userIlnfo; 

3 this. setDatal { 

4. src: info. avatarUrl], // 更 新 图 片 来 源 

5 name: linfo,nickName /更 新 昵称 

6 }) 

1 }, 


2. 2.5 


Hello World 


点 击 控 钮 


\ 


| ”点击 获取 头像 和 昵称 ” ) 


(a) 初始 页 面 效 果 (b) 点 击 按钮 后 的 效果 
图 2-18 最 终 效果 图 


完整 代码 展示 


app. json 文件 的 完整 代码 如 下 : 


王政 


Le 


{ 


pages : [ 
"pages/ index/ index" 


时 


} 


Wincow : { 
"navigationBarBackgroundColor": "#663399", 
"navigqationBarTitleText" : "手动 创建 第 一 个 小 程序 "， 
"navigationBarTextStyle" : "white" 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


1. 
" 
4. 
= 
6b. 
Fs 


< Vlew Class= Contalner > 
< image src= '{{src}}' mode = 'widthFix'></image > 
< text >{ {name} }</text > 
< button open ~— type = 'getUserInfo' bindgetuserinfo = 'getMyInfo'> 
点 击 获取 头像 和 昵称 
</button > 
</view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


1. .container { 

height: 100vh; /* 高 100 视窗 ,这 里 写 100$ 无 效 */ 
3. display: flex; /* flex 布局 模式 */ 

4. flex— direction: column; /* 王 直 布局 */ 

align— items: center; /< 水 平方 各 居中 类/ 

6. Justify— content: space — around ; /xx 和 王 直 方 回 分 做 布局 */ 
7. |} 

8. image 1 

9. width: 300rpx; /< 图 片 宽度 <*/ 

10. border - radius: 50%; /*4 个 角 变 为 圆 角 形状 * / 
11. } 

12. text { 

13. font— size: S50Orpx; /* 字体 大 小 */ 

14. } 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 . 


1. Pagelt{ 

2 / x 

3 * 页 面 的 初始 数据 

4. *x/ 

5. data: 1 

6 src: '/images/logo. png', 

7 name: 'Hello World' 

8 }, 

9. / x 

10. * 目 定 义 困 数 -- 获取 微 信 用 户 信息 

11. */ 

12. getMyInfo: function(e) { 

1 let lnfo = e, detail. userlnfo,; 

14. this. setDatal { 

15. src: lnfo. avatarUrl], // 里 新 图 片 来 源 
16. name: info. nickName /7/ 更 新 昵称 
17. }) 

18. } 


19. }) 


小 程序 框 麻 


本 草 内 容 主 要 包含 两 个 使 用 flex 布局 模型 创建 的 小 程序 项 目 实 例 , 一 是 仿 微 信 “ 发 现 ” 页 
0 二 是 仿 微 信 ”钱包 ?页面 创 建 九 宫 格 布局 小 程序 。 


。 守 习 使 用 {flex 布 局 模型 和 wx:for 属性 创建 列表 布局 小 程序 ; 
。 学 习 使 用 flex 布局 模型 和 wx:for 属性 创建 九宫 格 布局 小 程序 。 


微 信 App 的 发现” 页 面 是 由 硅 干 个 垂下 排列 的 列 
表 组 成 的 ,每 个 列表 项 均 包 含 图 标 、 文 字 和 箭头 符号 ,如 
图 3-1 所 示 。 
本 项 目 将 使 用 flex 布局 模型 和 wx:for 属性 仿 微 信 
“发 现 ” 页 面 实现 列表 布局 效果 。 


3.1.1 项 目 创建 


本 项 目 创建 选择 空白 文件 夹 
wxDiscover ,效果 如 图 3-2 所 示 。 

单 击 “ 新 建 " 按 钮 完成 项 目 创建 ,然后 
准备 手动 创建 页 面 配置 文件 。 


3.1.2 页 面 配 置 


邮 创建 页 面 文件 

项 目 创建 完毕 后 ,在 根 目 录 中 会 生成 
文件 夹 pages 用 于 存放 页 面 文件 。 一 般 来 
说 首页 默认 命名 为 index, 表 示 小 程序 运行 
的 第 一 个 页 面 ; 其 他 页 面 名 称 可 以 目 定 义 。 本 项 目 只 需要 保留 让 页 (index) 即 可 。 

具体 操作 如 下 : 

(1) 将 app. json 文件 内 pages 属性 中 的 “pages/logs/1logs” 删 除 ,并 删除 上 一 行 末 尾 的 逗号 。 

(2) 按 快 捷 键 Ctrl 十 S 保存 当前 修改 。 


3-1 微 信 App” 发现" 页面 真 机 截屏 


WxXDIStover 


EWWxdemo workspaceWwxDiscover 


wx19079110a0iD1e8a 
车 无 ApplD 可 注册 


或 使 用 测试 号 


i 使 用 干 台 扣 供 的 API 进行 核心 业务 开发 ， 即 可 实现 了 性 序 快速 上 线条 
迁 代 。 了 解 详情 


图 3-2 ”小 程序 项 目 填 写 效 果 示 意图 


删除 和 修改 文件 

具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 太 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 自 
动 补 全 隐 数 (如 图 3-3 所 示 )。 

index js 


Function 0 


中 EetCurrentPages 

3 package 

Pp pauseBackeroundAudio 
FP previewImage 

A canvasPutImageData 


3-3 输入 关键 词 创建 Page 函数 


(5) 删除 app. wxss 中 的 全 部 代码 。 

(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 有 目 动 
补 全 图 数 ( 如 图 3-4 所 示 )。 

区 创建 其 他 文件 

接 下 来 创建 其 他 自 定义 文件 ,本 项 目 还 需要 一 个 文件 夹 用 于 存放 图 标 素 材 。 文 件 夹 名 称 
由 开发 者 自 定义 (例如 images) , 单 击 目录 结构 左上 角 的 十 号 创建 文件 夹 并 命名 为 images。 


app.|s 吉 
1 /fapp .js 


Ffunction Oh 


3-4 输入 关键 词 创建 App 函数 


本 项 目 将 用 到 8 个 列表 项 图 标 和 1 个 通用 箭头 图 标 ,图 片 素材 如 图 3-5 所 示 。 


av | 
de 
(a) moments.png (b) scan.png (c) shake.png 
| J EN 
| os | AN 
(d) topStories.png (e) search.png (f) shopping.png 
Eb 
(E) games.png (h) miniProgram.png (1) arrow.png 


3-5 ”图 标 素材 展示 


右 击 目录 结构 中 的 images 文件 夹 ,选择 “ 便 盘 打开 ”, 将 图 片 复制 .粘贴 进 去 。 


全 部 完成 后 的 目录 结构 如 图 3-6 所 示 。 
此 时 文件 配置 就 全 部 完成 ,3. 1. 3 节 将 正式 进行 页 面 | -一 一 
布局 和 样式 设计 o arrow.png 
. games.png 
3.1.3 ”视图 设计 bn 
导航 栏 设计 re WE 
小 程序 默认 导航 栏 就 是 黑 底 日 字 的 效 视频 讲解 shake.png 
a i . shopping.png 
果 , 因 此 只 需要 在 index. json 中 日 定义 导 i 
航 栏 标题 即 可 。 更 改 后 的 index. json 文件 代码 如 下 : 
1. 1 JS_ index.js 
2 . "navigationBarTitleText" : "发 现 " { } index json 
可， } «> index. wxml 


上 述 代码 可 以 更 改 当 前 页 面 的 导航 栏 加 jf 闪 人 革 加 Pe 
标题 文本 为 “发 现 ”, 效 果 如 图 3-7 所 示 。 话 汪 2RRH 沁 
因 页 面 设计 二 让 
页 面 上 主要 包含 5 组 列表 ,每 组 列表 “一 国生 
包含 1 一 2 个 列表 项 ,具体 内 容 解释 如 下 。 ”视频 讲解 人 
。 列 表 组 1:“ 朋 友 圈 ”单行 列表 项 ; 
。 列 表 组 2:“ 扫 一 扫 ” 和 * 摇 一 摇 ” 两 行列 表 项 ; 
。 列 表 组 3:“ 看 一 看 ”和 “ 搜 一 搜 ” 两 行列 表 项 ; 


{} app.json 
wss App.WXSS 


{} project.config.json 


列表 组 4:“ 购 物 ” 和 “游戏 ”两 行列 表 项 ; 
。 列表 组 5:“ 小 程序 ?单行 列表 项 。 
每 个 列表 组 之 间 需 要 有 一 定 的 间隔 距离 ,设计 图 如 


图 3-7 自 定义 导航 栏 效果 3-8 所 示 。 


计划 使 用 如 下 组 件 。 


页 面 整体 ; < view > 组 件 ,并 定义 class== 'container'; 
列表 组 : < view > 组 件 , 并 定义 class 王 'listGroup '; 
列表 项 单行 : < view > 组 件 , 并 定义 class== 'listItem '; 
列表 图 标 : < image >( 图 像 ) 组 件 ; 

列表 文字 内 容 : < text >( 文 本 ) 组 件 ; 

入 头 图 标 : <image>( 图 像 ) 组 件 。 


首先 定义 页 面容 天 (< view >),WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 


1. 
- 


< Vlew Class = 'container'> 
</view> 


WXSS(pages/index/index. Wxss) 代 码 片 段 如 下 : 


-i 


/ * 背景 容器 样式 * / 
.Containerl{ 
height: 100vh; /* 高 度 为 100 视窗 ,写成 100% 无 效 */ 
background - color: silver; /* 背景 闫 色 为 银色 * / 
display: flex; / x* flex 布局 模型 x / 
flex— direction: column; /xx 垂直 布局 < 关 / 
} 


当前 效果 如 图 3-9 所 示 。 


列表 组 3 


列表 组 4 


列表 组 5 


图 3-8 页 面 设计 图 图 3-9 当前 页 面 预览 效果 


由 图 可 见 , 此 时 整个 页 面 痛 景 变 成 了 银色 。 由 于 还 没 添加 组 件 元 双 , 所 以 疝 看 不 出 来 flex 
布局 模型 效果 。 
接 下 来 以 第 一 个 列表 选项 为 例 , WXML(pages/index/index. wxml) 人 代码 片 段 修改 如 下 : 


1. <view class= 'container'> 

2. < View class= 'listGroup'> 

3. < view class= 'listItem'> 

4. < image src= '/images/moments. png'></inmage > 
5. < text > 朋友 圈 </text > 

6. < image src= '/images/arrow. png'></image > 

了 . </view > 

8 . </view > 

9. </view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x* 列表 组 样式 */ 

2. .listGroupl{ 

3 background — color: white; /< 背景 颜色 为 白色 </ 

4 margin: 20rpx 0; /x 上 下 外 边 距 20rpx, 左右 0xV/ 
5 + 

6. /x 列表 项 单行 样式 */ 

7 .J]istItemt{ 

8. display: flex; /x* flex 布局 模型 * / 

9. flex— direction: row; /< 水 平 布局 关 / 

10. align 一 items: center:; /* 翟 直方 向 居中 x*/ 

11. border: lrpx solid silver; /#1rpx 宽 的 银色 实 线 边框 * / 
12. padding: 10rpx; /< 内 边 距 10rpx* / 

13. | 

14. /x* 图 标的 尺寸 */ 

15. imagel{ 

16. width: 80rpx; /x* 览 度 关 / 

17. height: 80rpx; /* 高 度 */ 

18， margln: 0 15rpx; /上 下 外 边 距 0, 左右 外 边 距 15rpx * / 
19. }]} 

20. /xx 文本 样式 */ 

21. text{ 

2 font — size: A0rpx:; /* 字体 大 小 40rpx x*/ 

23. flex— grow: 1; /x 扩张 多 余 空 间 宽 度 x*/ 

24. } 


当前 效果 如 图 3-10 所 示 。 

由 图 可 见 , 此 时 可 以 显示 第 一 个 列表 组 的 内 容 。 用 同 
样 的 方式 追加 后 续 的 列表 组 即 可 实现 完整 效果 。 当 然 也 可 
以 暂时 不 追加 其 他 列表 项 ,使 用 3. 1. 4 节 介 绍 的 方法 减少 
工作 量 。 


3.1.4 逻辑 实现 


使 用 动态 数据 展示 列表 

由 于 所 有 列表 项 的 内 容 布 局 都 是 统一 
的 ,可 以 考虑 使 用 wx:for 属性 配合 动态 数组 
泻 染 全 部 列表 项 ,以 减少 WXML 页 面 的 代码 量 。 图 3-10 当前 页 面 预览 效果 


修改 WXML(pages/index/index. wxml) 页面 代码 如 下 : 


1l. <view class = COntalner > 

2 < View class = 'listGroup' wx:for = '{{list}}' wx:for - item = 'group' wx: key = 'group{ {index}}'> 

本 <Vliew class = 'listItem’' wx:for = '{{group}}' wx:for- item= 'row' wx:key = 'Iowf{index}j > 
4. < image class = 'icon' src = '{{row. icon} } '></image > 

3 < text >{{row. text}}</text > 

6. < image src = '/images/arrow. png'></image > 

i </view> 

8. </view> 

9. </view> 


上 述 代 码 表 示 将 使 用 双重 wx:for 属性 循环 显示 全 部 列表 项 ,其 中 (1{list)) 数 组 用 于 表示 
5 个 列表 组 ,并 为 每 个 列表 组 起 了 别名 group; 每 个 列表 项 也 起 了 别名 row, 列 
表 项 的 图 标 和 文本 分 别 命 名 为 icon、text。 这 里 均 为 自 定义 名 称 , 开 发 者 可 以 
日 行 更 改 。 

因 补充 数组 完整 信息 ' 

在 index. js 的 data 属性 中 添加 list 数组 ,JS 文件 (pages/index/index.js) ”视频 讲解 
代码 如 下 : 


1. Pagel({ 

2 data: 1 

3 list: [ 

4 // 第 1 组 列表 

5. [{ text: ' 朋 友 圈 ',， icon: '/images/moments. png' }]，, 

6 // 第 2 组 列表 

了 [ 

8. { text: ' 扫 一 扫 '，icon: '/images/scan. png' }, 

9. { text: ' 摇 一 摇 '，icon: '/images/shake. png' } 

10. ], 

11. // 第 3 组 列表 

12. [ 

13. { text: ' 看 一 看 '，icon: '/images/topStories. 

png' 上， 

14. { text: ' 搜 一 搜 '，icon: '/images/search. png' } 

15. Fp 

16. // 第 4 组 列表 

17. [ 

18. { text: ' 购 物 '，icon: '/images/shopping. png' }， 

19. { text: ' 游 戏 '，icon: '/images/games. png'】} 

20; ]， 

上 // 第 5 组 列表 

22. [{ text: ' 小 程序 '，icon: '/images/nminiProgram. 
png 上 

23. ] 

24. } 

25. 上 | 


此 时 就 已 全 部 完成 ,保存 后 重新 预览 项 目 , 最 终 效果 图 
如 图 3-11 所 示 。 


3.1.5 完整 代码 展示 


app. json 文件 的 完整 代码 如 下 : 图 3-11 最 终 效果 图 


{ 
"pages : [ 
"pages/ index/ index" 
] 
} 


nD 


JSON 文件 (pages/index/index. json) 的 完整 代码 如 下 : 


1. { 
2 "navigationBarTitleText":" 发 现 " 
3. } 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


1. < 过 VlewcCclass = “Contalnmer > 

2 < View class = 'listGroup' wx:for = '{{list}}' wx:for— item= 'group' wx:key = 'group{ {index}}'> 

3 <vVview class = 'listItem’' wx:for = '{{group}}' wx:for— item= 'row' wx:key = 'row{{index}}'> 
4. < image src= '{{row. icon} } '></image > 

3 < text >{ {row. text} }</text > 

6. < image src = '/images/arrow. png'></ image > 

7. </view> 

8. </view> 

9. </view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 ， 


1. /x* 痛 景 容 冀 样式 */ 

2 . Containert{ 

3 height: 100vh; /* 高 度 为 100 视窗 ,写成 100% 无 效 */ 
4 background — color: silver; /x* 背景 糊 色 为 银色 x* / 

5. display: flex:; /x* flex 布局 模型 x / 

6 flex— direction: column; /<*< 垂 直 布 局 关 / 

7. 1 

8. /x* 列表 组 样式 * / 

9. .listGroupt{ 

10. background — color: white; /* 痛 晕 颜色 为 日 色 */ 

11. margin: 20rpx 0; /x 上 下 外 边 距 20rpx, 左右 0*/ 
12. |} 


13. /* 列表 项 单行 样式 * / 
14. .listItem{ 


本 displavy: flex; /* flex 布局 模型 * |/ 

16. flex— direction: row; /*#* 水 平 布局 */ 

17. align ~ items: Center ; /* 王 下 方 同 居中 */ 

18. border: lrpx solid silver; /* 1rpx 宽 的 银色 实 线 边框 * / 
19. padding: 10rpx; /< 内 边 距 10rpx*/ 

20. } 

21. /* 图 标的 尺寸 */ 

22. imagel 

23. width: 80rpx; /x* 视 度 </ 

24. height: 80rpx; /x 高度 */ 

25. margin: 0 15rpx; /x* 上 下 外 边 距 0, 左 布 外 边 距 15rpx * / 
26. } 

27./* 文本 样式 */ 

28. text{ 

29. font— size: 40rpx; /x* 字体 大 小 40rpx*/ 

30. flex— grow: 1; /x* 扩张 多 余 空 间 宽 度 x*/ 


31. } 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


1. Page({ 

2 data: { 

list: [ 

4 // 第 1 组 列表 

5 [{ text: ' 朋 友 圈 ',， icon: '/images/moments. png' }]，, 
6 // 第 2 组 列表 

7 [ 

8. { text: ' 扫 一 扫 '，icon: '/images/scan. png' }, 

9. { text: ' 摇 一 摇 "，icon: '/images/shake. png' } 
10. | 

11. // 第 3 组 列表 

12. [ 

13. { text: ' 看 一 看 '，icon: '/images/topStories. png' } ， 
14. { text: ' 搜 一 搜 '，icon: '/images/search. png' } 
了 ， ]， 

16. // 第 4 组 列表 

17. [ 

18. { text:' 购 物 '，icon: '/images/shopping. png' } ， 
19. { text:' 游 戏 ',，icon: '/images/games. png' } 

20. Ls 

21. // 第 5 组 列表 

22. [{ text: ' 小 程序 '，icon: '/images/miniProgranm. png' }] 
23. ] 

24. | 

25。 上 


微 信 App“ 钱包 ”页 面 主要 分 为 上 、 下 两 个 部 分 ,上 
面 是 由 ”“ 收 付 协 汪 零钱 ?和 ”银行 卡 ” 组 成 的 钱包 状态 
芒 , 下 面 是 由 九 宣 格 组 成 的 “腾讯 服务 ? 芒 ,每 个 格子 里 
面包 含 图 标 和 下 方 的 文字 说 明 , 如 图 3-12 所 示 。 

本 项 目 将 使 用 flex 布局 模型 和 wx:for 属性 仿 微 
信 * 钱 包 ” 页 面 实现 九宫 格 布局 效果 。 


3.2.1 项 目 创 建 


本 项 目 创 建 选择 空 昌 文件 夹 
wxWallet ,效果 如 图 3-13 所 示 。 

单 击 “新 建 ?按钮 完成 项 目 创建 ,然后 
准备 手动 创建 页 面 配置 文件 。 


3.2.2 页 面 配置 


创建 页 面 文件 
项 目 创建 完毕 后 ,在 根 目录 中 会 生成 
文件 夹 pages 用 于 存放 页 面 文件 。 一 般 


腾讯 公益 


限时 推广 


a 加 导入 项 目 


wxWallet 


_ EWwxdemo_workspaceWwxWallet 


wx19079110a0f1e83 
车 无 ApplD 可 注册 


Pe es 用 ae, 
EE | | 


TA 


时 忆 先 所 库 1 一 
建 服务 露 ， 使 用 平台 提供 的 API 进行 慷 心 业务 开发 ， 
迁 代 。 了 解 详情 


全 腾讯 去 


Javascript 


图 3-13 ”小 程序 项 目 填写 效果 示意 图 


来 说 首页 默认 命名 为 index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 称 可 以 和 目 定义 。 本 项 
目 只 需要 保留 首页 (index) 即 可 。 

具体 操作 如 下 : 

(1) 将 app. json 文件 内 pages 属性 中 的 “pages/logs/logs ”删除 ,并 删除 上 一 行 末 尾 的 
如 号 。 

(2) 按 快捷 键 Ctrl 十 S 保存 当前 修改 。 

删除 和 修改 文件 

具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 自 
动 补 全 函数 (如 图 3-14 所 示 )。 

(5) 删除 app. wxss 中 的 全 部 代码 。 


index .js 者 


1 /iindex .js 


unctioen 0 


TD getCurrentPages 


BS package 

Pp pauseBackgroundAudio 
AP previewImage 

A canvasPutImgeData 


3-14 输入 关键 词 创建 Page 水 数 


和 # 


(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 日 动 
补 全 因数 (如 图 3-15 所 示 )。 


app.js 全 
1 /fapp.js 


3-15 输入 关键 词 创建 App 函数 


创建 其 他 文件 
接 下 来 创建 其 他 自 定 义 文 件 ,本 项 目 还 需要 一 个 文件 夹 用 于 存放 图 标 素材 。 文 件 夹 名 称 
由 开发 者 和 目 定 义 ( 例 如 images) , 单 击 目录 结构 左上 角 的 十 号 创建 文件 夹 并 命名 为 images。 
由 于 本 项 目 用 到 的 图 标 素材 较 多 ,将 在 images 文件 夹 下 分 为 两 个 二 级 目录 放置 。 
” top: 项 站 钱包 状态 栏 的 图 标 共 3 个 ,如 图 3-16 所 示 。 


A 


L J 


回 


(a) money.png (b) balance.png (cj cards.png 
图 3-16 ”顶端 钱包 状态 栏 图 标 素 材 展示 


。 service:“ 腾 讯 服务 ” 柱 的 九 串 格 图 标 共 8 个 ,如 图 3-17 所 示 。 


(a) png (b) 四 | png Le wealth.png ( Le utilities.png 
(e) ggCoins.png (1) publicService.png (g) charity.png (h) Insurance.png 


3-17 “腾讯 服务 ” 栏 图 标 素材 展示 


右 击 目录 结构 中 的 images 文件 来 ,选择 “ 便 盘 打开 ”, 将 二 级 目录 和 对 应 的 图 标 文 件 全 部 
复制 、 精 巾 进 去 。 和 完成 后 的 目录 第 构 如 图 3-18 所 示 。 
此 时 文件 配置 就 全 部 完成 ,3.2.3 万 将 正 却 进行 页 面 布局 和 样式 设计 。 


3.2.3 视图 设计 


李 导航 栏 设 计 

小 程序 默认 导航 栏 是 黑 底 白字 的 效果 ,因此 需要 在 index. json 中 自 定义 es 
导航 栏 标题 和 背景 颜色 。 更 改 后 的 index. json 文件 代码 如 下 : 视频 讲解 

1. 1{ 


2. "navigationBarTitleText": "钱包 "， 


上 述 代 码 可 以 更 改 当 前 页 面 的 导航 栏 标题 文 本 为 "钱包 ”背景 颜色 为 灰色 (#686F79) 。 


"navigationBarBackgroundColor" :" #686F79" 
} 


预 蜗 效 采 如 图 3-19 所 示 。 


+ Q 


v SS images 
. [BS service 
cardRepay.png 
charity.png 


insurance.png 


加 

加 

四 

回 mobileTopup.png 
问 publicService.png 
回 qqCoins.png 

问 utilities.png 

回 wealth.png 

加 top 


回 balance.png 


回 cards.png 

回 moneypng 
 S pages 
加 index 


JS index.js 
{} indexjson 
<> index.wxml 
wss index.wxss 

JS app.js 

{} app.json 

wxss app.WX3s 


{} project.config.json 


图 3-18 页 面 文件 创建 完成 图 3-19 自 定 义 导航 栏 效果 


页 面 设 计 
页 面 上 主要 包含 两 个 面板 ,具体 内 容 解释 如 下 。 


。 面板 1( 顶 端 钱 包 状 态 栏 ) : 包含 “ 收 付款 ”零钱 ”和 “银行 卡 ”3 个 方 格 ,每 个 方 格 中 均 有 


。 面板 2( 腾讯 服务 ?” 栏 ): 包含 第 一 行 标 题 和 下 方 的 九宫 格 区 域 , 其 中 共有 8 个 方 格 有 


图 标 .文本 ,其 中 "零钱 ?还 包括 第 二 行 副 文本 。 


内 容 , 包 括 图 标 和 文本 。 
注意 ,面板 之 间 需 要 有 一 定 的 间 隅 距离 ,设计 图 如 图 3-20 所 示 。 
计划 使 用 如 下 组 件 。 


页 面 整体 : < view > 组 件 ,并 定义 class 王 'container '; 

面板 1: < view > 组 件 , 并 定义 class 一 'topPanel '; 

面板 1 方 格 : < view > 组 件 , 并 定义 class 一 'boxl '; 

面板 2: < view > 组 件 ,并 定义 class 一 'servicePanel ' ; 

面板 2 标题 : < view > 组 件 , 并 定义 class 王 'serviceTitle '; 

面板 2 九宫 格 区 域 : < view > 组 件 , 并 定义 class 一 'serviceBlocks'; 
面板 2 方 格 : < view > 组 件 , 并 定义 class 一 'box2 '; 


方 格 内 图 标 : < image >( 图 像 ) 组 件 ; 


。 方 格 内 文字 内 容 : < text >( 文 本 ) 组 件 。 

1) 整体 布局 设计 

首先 定义 页 面容 器 (< view >),WXML(pages/index/index. wxml) 代 码 片 
段 如 下 : 


1. <Vlewclass = Contalner > 
2, </view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x*1 背景 容 妖 样式 */ 

2 . Container!{ 

本 height: 100vh; /* 高 度 为 100 视窗 ,写成 100% 无 效 */ 
4. background - color: silver; /< 背景 颜色 为 银色 关 / 

5 display: flex; /<flex 布 局 模型 </ 

6 flex— direction: column; /< 垂直 布局 关 / 

【0 


当前 效果 如 图 3-21 所 示 。 


了 巩 冰 钱包 状态 栏 


腾讯 服务 


3-20 页 面 设计 图 


图 3-21 当前 页 面 预览 效果 


由 图 可 见 ,此 时 整个 页 面 育 景 变 成 了 银色 。 由 于 还 没 添加 组 件 元 系 ,所 以 疝 看 不 出 来 flex 
布局 模型 效果 。 
然后 继续 添加 两 个 面板 组 件 , WXML(pages/index/index. wxml) 代 码 片 段 修改 如 下 : 


1 <Vlew Class = ‘container'> 

2. < View class = 'topPanel'> 

3. </view> 

4 < view Class= 'servicePanel'> 

5 < view class = 'serviceTitle'> 腾 讯 服 务 </view> 


6. < view class = 'serviceBlocks'></view > 
了 。 </view> 
8. </view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


/*2 面板 1: 顶端 状态 柱 * / 
.topPanel { 
height: 300rpx; 
background — color: #686F79; 
display: flex; 
flex— direction: row; 
} 
/*3 面板 2:“ 腾 讯 服务 ”* 栏 */ 
9. .servicePanel { 
10. min— height: 600rpx; 
11. background — color: white; 
12. margin: 20rpx 0; 
13. ] 
14. 7/x*3-1 面 板 2: 第 一 行 标题 样式 */ 
15. .serviceTitle { 
16. padding: 20rpx; 
17. border: lrpx solid silver; 


AAUPWNP 


18. font — size: 30rpx; 

19. Color: gray; 

20. |} 

21. /x*3 一 2 面板 2: 九宫 格 区 域 样式 * / 
22. .serviceBlocks { 

2 display: flex; 


24. flex— direction: row; 
-a flex— wrap: wrap; 
26. | 


当前 效 打 如 图 3-22 所 示 。 


由 图 可 见 ,此 时 可 以 显示 两 个 面板 的 布局 位 置 \ 育 景 颜色 以 及 面板 2 的 回 地 


标题 。 
2) 面板 1 方 格 设计 


例 , WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


1. <view class= Contalner > 

2 < Vlew class = 'topPanel > 

< 汪 < view class= 'boxl'> 

4. 

5. < text > 收 付款 </text > 
6. </view> 

7. </ View> 

8. 

9. </view> 


/* 高 度 */ 

/* 背景 糊 色 为 灰色 * / 
/ x* flex 布局 模型 x* / 
/水 平 布 局 */ 


/* 最 小 高 度 */ 
/* 背景 颜色 为 白色 x*/ 
/* 上 下 外 边 距 20rpx, 左右 0x*/ 


/* 四 周 内 边 距 20rpx* / 

/ * 1rpx 宽 的 银色 实 线 边 框 */ 
/ * 字号 为 30rpx 大 小 */ 

/* 字体 颜色 为 灰色 * / 


/ x* flex 布局 模型 * / 
/x 水平 布 局 * / 
/ * 允许 换行 * / 


视频 讲解 


< image src= '/images/top/money. png'></inmage > 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x*2--1 面板 1: 方 格 样式 */ 
2. .boxl { 

E display: flex; 

4. flex— direction: column; 


/ * flex 布局 模型 x / 
/< 垂直 布局 关 / 


align 一 Items : center; 

6 . width: 33%; 

7 height: 250rpx; 

8. } 

9. /x*2--2 面板 1: 方 格 内 图 标 样 式 */ 
10. .boxl imagef{ 

11. width: 110rpx; 

12. height: 110rpx; 

13. margin: 20rpx; 

14. |} 

15. /<x*2-3 面 板 1: 方 格 内 文本 样式 */ 
16. .boxl 七 ext{ 

17. text 一 align: center; 

18. color: White; 

19. font 一 size: 35rpx; 

20. |] 


当前 效 采 如 图 3-23 所 示 。 


重重 生生 WEChat 到 


图 3-22 ”当前 页 面 预览 效果 


由 图 可 见 , 此 时 可 以 显示 面板 1 的 “ 收 付款 


/* 水 平方 向 居中 */ 
/* 宽度 约 占 屏 幕 的 1/3*/ 
/x* 高 度 */ 


/x 宽度 x / 
/x 高 度 x / 
/x 四 周 外 边 距 均 为 20rpxx / 


/* 文本 居中 */ 
/x 字体 颜色 为 白色 x / 
/* 字 号 为 35rpx 大 小 */ 


重重 重量 WELhat 全 


图 3-23 ”面板 1 预览 效果 


丈 ” 方 格 内 容 , 包 括 图 标 和 文本 。 用 同样 的 方式 退 


加 其 他 方 格 即 可 实现 完整 效果 。 当 然 也 可 以 暂时 不 追加 ,使 用 3. 2.4 节 介 绍 he 


的 方法 减少 工作 量 。 
3) 面板 2 方 格 设计 


接 下 来 制作 面板 2 的 方 格 内 容 , 以 其 中 左边 第 一 个 方 格 “ 信 用 卡 还 款 ” 内 


容 为 例 , WXML(pages/index/index. wxml) 代 码 片 段 修改 如 下 : 视频 讲解 


1]. <view class = 'container'> 
了 
3. < Vlew Class= 'servicePanel'> 


的 ,可 以 考虑 使 用 wx:for 属性 配合 动态 
数组 泻 染 全 部 列表 项 ,以 减少 WXML 页 面 的 代码 量 。 
修改 WXML(pages/index/index. wxml) 页面 代码 


4. < View class = 'serviceTitle'> 和 腾讯 服务 </view > 

5. <Vlew Class = "serviceBlocks'> 

6. < view class= 'box2'> 

7. < image src= '/images/service/cardRepay. png'></image > 
8. < text > 信用 卡 还 款 </text > 

9. </view> 

10. </view> 

11. </ View> 


12. </view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


to “] 后 忆 区 lo 搬 


\o 


17. 
18. 
19. 
当前 效果 如 图 3-24 所 示 。 

由 图 可 见 , 此 时 可 以 显示 面板 2 的 “信用 卡 还 球 ” 方 
格 内 容 。 用 同样 的 方式 退 加 其 他 方 格 即 可 实现 完整 效 
果 。 当 然 也 可 以 暂时 不 追加 ,使 用 3.2.4 节 介绍 的 方法 
减少 工作 量 。 


3.2.4 逻辑 实现 
面板 1 的 逻辑 实现 


1) 
由 


如 下 : 


I 
2. 
EE 
4. 


PP 
| 


/x*3-2-1 面 板 2: 九宫 格 区 域 方 格 样式 */ 


. box2 { 
border: lrpx solid silver.; / 基 lrpx 宽 的 银色 实 线 边 框 关 / 
displav: flex; /* flex 布局 模型 * / 
flex— direction: column; /* 和 玲 直 布局 */ 
align ~ items: center; / 关 水 平方 回 居 中 关 / 
Justify— Content : CenteT / 关 重 直方 向 居中 关 / 
width: 33%; /* 宽度 约 占 屏幕 的 1/3*/ 
height: 230rpx; /* 高 度 230rpx x / 
4 
. Vx3-2-2 面 板 2: 方 格 内 图 标 x/ 
. .box2 image { 
width: 90rpx; /¥ 贤 度 关 / 
height: 90rpx; /xx 高 度 */ 
+ } 重要 重重 和 NEChat 全 
/x3 一 2 一 3 面板 2: 方 格 内 文本 */ 
. box2 text { 


font — size: 30rpx; /* 字号 为 30rpx 大 小 */ 
} 


使 用 动态 数据 展示 方 格 
于 所 有 方 格 的 内 容 布局 都 是 统一 


3-24 ”面板 2 预览 效果 


<Vlew Class = 'container'> 
< View class = ‘topPanel > 
< View class = 'boxl' wx:for= '{{arrayl}}'wx:key = 'arrayl {{index}}'> 
< image src = '{{item. icon} } '></ image > 


发 者 可 以 目 行 更 改 。 


js) 代 码 如 下 : 


WXML 页 面 的 代码 量 。 


格 , 方 格 区 域 中 的 图 标 和 文本 分 别 命名 为 icon .text。 这 里 均 为 自 定义 名 称 , 开 “” 回 ， 
发 者 可 以 自行 更 改 。 


5 < 七 ext >{{item. text}}</text > 
6 </Vview> 

7. </view> 
8 
9 


</view> 


上 述 代码 表示 使 用 wx:for 属性 循环 显示 全 部 方 格 ,其 中 (arrayl1)) 数 组 用 于 表示 3 个 方 


2) 补充 数组 完整 信息 
在 index. js 的 data 属性 中 添加 arrayl 数组 ,JS 文件 (pages/index/index. 


1. Pagel({ 

data: { 

3 // 面 板 1 的 九宫 格 数组 

4 arrayl: [ 

3 { icon: '/images/top/money. png'，text: ' 收 付 蒜 ' }， 

6 { icon: '/images/top/balance. png'，text: ' 零 钱 \n0.00' }， 
7 { icon: '/images/top/cards. png'，text: ' 银 行 卡 '}， 

8 ] 

9 . } 

10. }) 


当前 效 采 如 图 3-25 所 示 。 

面板 2 的 逻辑 实现 

1) 使 用 动态 数据 展示 方 格 

接 下 来 继续 使 用 wx: for 属性 配合 动态 数组 泻 染 全 部 列表 项 ,以 减少 


修改 WXML(pages/index/index. wxml) 页 面 代 码 如 下 : 
< Vlew Class = 'container'> 


] 

2 

3 < VlIew Class= "servicePanel'> 

4 < View class = 'serviceTitle'> 腾 讯 服务 </view > 
5. <Vlew Class = "serviceBlocks'> 

6 < View Class = 'box2' wx:for = '{{array2}}' wx:key = 'array2 {{index}}'> 
7 < image src = '{{item. icon}} '></ image > 

8. < text >{{item. text}}</text > 

9 . </view> 

10. </view> 

11. </view> 

12. </view> 


上 述 代码 表示 使 用 wx:for 属性 循环 显示 全 部 方 格 , 其 中 {array2)} 数 组 用 于 表示 8 个 方 


2) 补充 数组 完整 信息 
在 index. js 的 data 属性 中 添加 array2 数组 ,JS 文件 (pages/index/index. a 
js) 代 码 如 下 : 视频 讲解 


Pagel { 
data: { 
// 面 板 1 的 九宫 格 数组 


array2: [ 
{ icon: '/images/service/cardRepay. png'， text: ' 信 用 卡 还 款 ' }， 
{ icon: '/images/service/mobileTopup. png'，text: ' 于 机 充值 ' }， 


1 

2 

3 

4. ess 

5. // 面 板 2 的 九宫 格 数组 
6. 

7 

8 

9 { icon: '/images/service/wealth. png'，text: ' 理 财 通 ' }， 


10. { icon: '/images/service/utilities. png'，text: ' 生 活 缴 费 ' }， 

11. { icon: '/images/service/qqCoins. png'，text: "0 币 充 值 ' }， 

12. { icon: '/images/service/publicService. png'，text: ' 城 市 服务 ' }， 
13. { icon: '/images/service/charity. png'，text: ' 腾 讯 公 益 '}， 

14. { icon: '/images/service/insurance. png'，text: ' 保 险 服务 '} 

15. ] 

16. } 

17. }) 

此 时 就 已 全 部 完成 ,保存 后 重新 预览 项 目 ,最终 效果 图 如 图 3-26 所 示 。 


各 et hat 二 1 E |; uesee WeChat 3 


3-25 ”面板 1 预览 效果 3-26 ”最 终 效 果 图 


3.2.5 完整 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


-pages : | 
"pages/ index/ index" 
] 
} 


tn 


JSON 文件 (pages/index/index. json) 的 完整 代码 如 下 ; 


{ 


局 《es 情 


} 


"navigationBarTitleText": "钱包 "， 
"navigationBarBackgroundColor":" 间 686F79" 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


DOT DN 


< Vliew class = 'container'> 


5 
ke 搬 全 


上 
I 


CC 
心 


> 
(有 


一 
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< VlIew class = ‘topPanel'> 
< Vliew Class = 'boxl' wx:for = '{{arrayl}}'wx:key = "arrayl {{index}}'> 
< image src = '{{itenm. icon} } '></ image > 
< text >{{item. text}}</text > 
</ Tiew> 
</ View> 
<Vlew Class= SeIVICePane] > 
<View class = 'serviceTitle'> 腾 讯 服 务 </view> 
<View class= 'serviceBlocks'> 
<View class = 'box2' wx:for= '{{array2}}'wx:key = 'array2 {{index}}'> 


< image src = '{{item. icon} } '></image > 
< text >{{item. text} }</text > 
</view> 
</view> 
</view> 
. </view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 ， 


1. /x*1 背景 容 帮 样式 */ 

2 .Container { 

3 height: 100vh; /* 高 度 为 100 视窗 ,写成 100% 无 效 */ 
4. background — color: silver; /* 痛 景 颜色 为 银色 * / 
5 displavy: flex; /* flex 布局 模型 * |/ 

6 flex— direction: column; /< 垂直 布局 </ 

7. 1} 

8 

9. /x*2 面板 1: 顶端 状态 栏 */ 

10. .topPanel { 

11. height: 300rpx; /* 局 度 x*/ 

12. background - color: #686F79; /* 痛 景 颜色 为 灰色 * / 
1 3， display: flex; / * flex 布局 模型 * / 
14. flex— direction: row; / 关 水 平 布 局 关 / 

15. |} 

16. /x*2 一 1 面板 1: 方 格 样式 x*/ 

17. .boxl { 

18. display: flex; / * flex 布局 模型 * / 
19. flex— direction: column; /< 垂直 布局 关 / 

20. align 一 Items : Center; /* 水 平方 品 居 中 */ 
21. width: 33%; /* 宽 肛 约 占 屏 舌 的 1/3* / 
2 height: 250rpx; /x* 高 度 */ 

23。 |】 

24. /x*2 一 2 面板 1: 方 格 内 图 标 样式 x / 

25. .boxl image{ 

26. width: 110rpx; /x* 宽度 x*/ 

27. height: 110rpx; /* 高 度 */ 


margin: 20rpx; 


. /x*2 一 3 面板 1: 方 格 内 文本 样式 x*/ 
. .boxl text{ 


text ~ align: center; 
color: white:; 
font 一 size: 35rpx; 


.1} 


. /x*3 面板 2:“ 腾 讯 服 务 " 柱 x*/ 


. .ServicePanel 1 


min— height: 600rpx; 
background — color: white; 
margin: 20rpx 0; 


.} 
. /*3 一 1 面板 2: 第 一 行 标题 样式 x / 


. .ServiceTitle { 


padding: 20rpx; 
border: lrpx solid silver; 
font 一 size: 30rpx; 


color: gray; 


，} 
. /*3 一 2 面板 2: 九宫 格 区 域 样式 */ 


. .ServiceBlocks { 


display: flex; 
flex— direction: row; 


flex— wrap: wrap; 


| 
. Vx3-2-1 面 板 2: 九宫 格 区 域 方 格 样式 x / 
. .box2 | 


border: lrpx solid silver; 
display: flex; 

flex— direction: column; 
align ~ items: center:; 
Justify— content: center:; 
width: 33 和 村 ; 

height: 230rpx; 


4 
. Yx*3-2-2 面 板 2: 方 格 内 图 标 */ 
. .box2 image { 


width: 90rpx; 
height: 90rpx; 


. } 
. /x*3 一 2 一 3 面板 2: 方 格 内 文本 x*/ 
. .box2 text { 


font 一 size: 30rpx; 


a 


/* 四 周 外 边 距 均 为 20rpx* / 


/* 文本 大 中 */ 
/* 字体 颜色 为 白色 x*/ 
/* 字号 为 35rpx 大 小 x / 


/* 最 小 高 度 */ 
/* 背景 颜色 为 日 色 x*/ 
/* 上 下 外 边 距 20rpx, 左右 0x*/ 


/* 四 周 内 边 距 20rpx*/ 

/x* 1rpx 宽 的 银色 实 线 边 框 * / 
/ 关 字 号 为 30rpx 大 小 */ 

/x* 宇 体 颜色 为 灰色 * / 


/x* flex 布局 模型 */ 
/水 平 布局 */ 
/* 允许 换行 * / 


/* 1rpx 宽 的 银色 实 线 边 框 * / 
/* flex 布局 模型 x*/ 
/* 王 下 布局 */ 

/* 水 平方 向 居中 */ 

/* 王 下 方向 居中 */ 

/* 贺 度 约 占 屏幕 的 1/3* / 
/x 高 度 230rpx* / 


/* 加 度 */ 
/* 局 度 */ 


/< 字号 的 30rpxz 大 小 x*/ 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


1 
2 
3 
4. 
5 
6 


Pagel { 
data: { 
// 面 板 1 的 九宫 格 数 组 


arrayl: [ 


{ icon: '/images/top/money. png'，text: ' 收 付款 ' }， 
{ icon: '/images/top/balance. png'，text: ' 雯 钱 \n0.00' }， 


{ icon: '/images/top/cards. png'，text: "银行 卡 ' }， 


]， 


// 面板 2 的 九 定格 数 组 
array2: [ 
{ icon: '/images/service/cardRepay. png'，text: ' 信 用 卡 还 款 ' }， 
{ icon: '/images/service/mobileTopup. png'，text: ' 手 机 充值 " }， 
{ icon: '/images/service/wealth. png'，text: ' 理 财 通 ' }， 
{ icon: '/images/service/utilities. png'，text: ' 生 活 缴 费 ' }， 
{ icon: '/images/service/qqcoins. png'，text: "有 币 充值 ' }， 
{ icon: '/images/service/publicService. png'，text: "城市 服务 " }， 
{ icon: '/images/service/charity. png'，text: ' 膳 讯 公 益 ? }， 
{ icon: '/images/service/insurance. png'，text: "保险 服务 ' } 


小 程 友 组件. 笨 数 子 游戏 


本 章 主要 介绍 使 用 小 程序 组 件 相 关 知 识 制作 一 球 简 易 的 猿 数 字 游 戏 , 系统 将 随机 生成 
0 10 


。 学 习 使 用 基础 容器 < view >; 
。 学 习 使 用 <form>、<input> 和 < button > 等 组 件 。 


效果 如 图 4-1 所 示 。 


图 4-1 猜 数 字 小 游戏 效果 图 


a 


本 项 目 创建 选择 空白 文件 夹 numberGuess, 效 果 如 图 4-2 所 示 。 re en 
单 击 “新 建 ?按钮 完成 项 目 创建 ,然后 准备 手动 创建 页 面 配置 文件 。 视频 讲解 


-4 加 导入 项 目 


项 目 名 称 numberGUuess 


目录 Ewxdemo_ workspacemnumberGuess 


wx19079110a0f01e8a 


车 无 ApplD 可 注册 
或 使 用 测试 号 


小 程序 

@ 不 使 用 云 服务 

小 程序 -: 云 开发 

小 程序 - 云 开发 为 开发 者 提供 数据 库 、 存 信和 云 函数 等 完整 的 云 涝 支 持 。 无 亏 撕 
建 艰 务 器 ， 使 用 平台 提供 的 AP| 进行 核心 业务 开发 ， 即 可 实现 小 程序 快速 上 线 和 
选 代 。 了 解 详情 

证 讯 云 


JavasScript 


图 4-2 ”小 程序 项 目 填写 效果 示意 图 


4.2.1 创建 页 和 面 文 件 


项 目 创建 完毕 后 ,在 根 目录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 
本 项 目 共 有 4 个 页 面 文件 ,介绍 如 下 。 


app.lson bd 


。 首页 .index. wxml; 1 
。 开始 游戏 : game. wxml; pa 
。 游戏 规则 .; rules. wxml; ppg To tat, 
。 关 于 我 们 . about wxml，。 “pages/rules/rules” 
因此 需要 修改 app. json 文件 内 pages 属性 中 的 页 面 声 
明 ,修改 后 如 图 4-3 所 示 。 图 4-3 ”app. json 页 面 修改 pages 
配置 代码 
4.2.2 期 除 和 修改 文件 
具体 操作 如 下 : 


(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index.js 中 的 全 部 代码 ,并 且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 自 
动 补 全 函数 (如 图 4-4 所 示 )。 

(5) 删除 app. wxss 中 的 全 部 代码 。 
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tunction fh 


index.js 党 
1 Aindex.]js 
2 


BetCurrentpages 

2 package 

PP pauseBackgroundAudio 
PP previewImage 

A canvasPutImageData 


4-4 输入 关键 词 创 建 Page 函数 


(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 铬 
补 全 函数 (如 图 4-5 所 示 ) 。 


计 其 月 动 


app.js 


function 0 


9 getApp 


图 4-5 输入 关键 词 创建 App 函数 


此 时 文件 配置 束 全 部 完成 ,4.3 万 将 正式 进行 页 面 布局 和 样式 设计 。 


oa 


4.3.1 导航 位 设计 


JSON ed 分 别 ppp pad 以 index. json ea ; 名。 本 
的 代码 如 下 : 视频 讲解 


1. ff 
2. "navigationBarTitleText" :" 猜 数字 小 游戏 " 
3. } 
上 述 代码 可 以 更 改 首页 导航 栏 的 标题 文本 为 “ 猜 数 Re 
字 小 游戏 ”, 戏 来 如 图 4-6 所 示 。 PR 


其 他 几 个 页 面 用 同样 的 方式 分 别 定义 标题 为 “开始 游戏 “游戏 规则 ”和 各 wgvss 
“关于 我 们 ”, 这 里 不 再 一 一 展示 代码 。 和 


4.3.2 公共 梓 式 该 计 


在 app. wxss 中 设置 小 程序 页 面 的 公共 样式 ,代码 如 下 ， 视频 讲解 


1. .containerl! 
» display: flex.; /x flex 模型 布局 */ 


3. flex— direction: column; / 关 和 垂直 布局 关 / 

4 . align— items: CenteTr; /x* 水 平方 和 铝 居 中 */ 

5. height: 100vh; /*# 高 度 为 100 视窗 ,写成 100% 无 效 */ 
6 . Justify— Content: Space 一 around ; /关内 容 调整 关 / 

7. } 


上 述 代 码 声明 了 一 个 名 称 为 container 的 类 用 于 各 页 面 作 为 底层 容 需 。 
4.3.3 ”页面 设计 


首页 设计 
首页 是 菜单 选择 页 , 共 包 含 3 个 按钮 ,具体 内 容 解 释 如 下 。 
。 开 如 游 戏 ; 点 击 跳 转 到 “ 开 妈 游戏 ”页 面 ; 
。 泊 戏 规则 : 点 击 跳 转 到 “游戏 规则 ”页 面 ; 
。 关于 我 们 ; 点 击 跳 转 到 “关于 我 们 ”页 面 。 
按钮 从 上 往 下 排列 并 且 水 平方 器 居 中 ,设计 图 如 图 4-7 所 示 ，。 
计划 使 用 如 下 组 件 。 
。 页 面 整体 : < view > 组 件 ,并 定义 class 二 'container'; 
。 按钮 : < button > 组 件 。 
首先 定义 页 面容 器 (< view >),WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 


1. <view class= Contalner > 

2. </view> 

此 时 app. wxss 文件 中 的 样式 就 会 起 到 作用 ,由 于 还 没 添加 组 件 元 孙 ,所 以 尚 看 不 出 来 
flex 布局 模型 效果 。 

接 下 来 在 < view > 容 融 内 部 依次 添加 3 个 按钮 , WXML(pages/index/index. wxml) 代 码 

1 <Vlew class = 'container'> 

2 < button type = 'primary'> 开 始 游 戏 </button > 
3. < button type = 'primary'> 游 戏 规则 </button > 
4 
2 


< button type = 'primary'> 关 于 我 们 </button > 
</View> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x* 按钮 样式 */ 

2 button{ 

只 width: 350rpx; /¥# 宽度 */ 
4. | 

当前 效果 如 图 4-8 所 示 。 

由 图 可 见 , 此 时 主 菜单 页 面 设计 已 经 完成 。 
“游戏 规则 ”页 面 设计 


者 日 行 设计 。 人 
首先 定义 页 面容 器 (< view >) ,WXML(pages/rules/rules. wxml) 代 码 片 视频 讲解 
段 如 下 ; 
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1. <view Class = 'container'> 
2. </view> 


游戏 规则 


| 关于 我 们 


关于 我 们 


图 4-7 页面 设计 图 图 4-8 首页 预览 效果 


然后 在 < view > 容 天 中 添加 文本 ,WXMLIpages/rules/rules. wxml) 人 代码 请 段 修 改 如 下 : 


1 < Vlew Class= 'container'> 

2 < text> 

3. 1. 系统 会 随机 生成 一 个 0 一 100 的 数字 让 玩家 猜 。 
4. 2. 玩 家 共有 8 次 机 会 

5. 3. 在 8 次 之 内 猜 到 则 游戏 成 功 。 

6. 4. 上 点 击 " 开 始 游戏 "进入 游戏 画面 。 

二 </text > 

8. </view> 


注意 文本 组 件 < text > 文 持 回 车 换行 ,还 可 以 使 用 \n 符号 获得 一 样 的 显示 效果 。 

当前 效果 如 图 4-9 所 示 。 

由 图 可 见 , 此 时 “游戏 规则 ”页 面 设计 已 经 完成 。 

“关于 我 们 ”页 面 设计 

“关于 我 们 ”页 面 同样 只 需要 包含 文本 组 件 < text > 即 可 ,描述 开发 者 或 工 
作 室 信息 。 下 

首先 定义 页 面容 天 (< view >),WXML(pages/about/about. wxml) 人 代码 视频 讲解 
片段 如 下 : 


1. <view Class = "Contalner > 
2,. </view> 


然后 在 < view > 容 帮 中 添加 文本 ,WXML(pages/about/about. wxml]) 代 人 码 厂 段 修 改 如 下 : 


1. <view class = 'container'> 
- <text>x x x 工作 室 荣 誉 出 品 。</text> 
3. </view> 
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当前 效果 如 图 4-10 所 示 。 


ETTTS 询 民 并- 上 可 fs 


硬 汪 而 而 二 让 WE hai 三 


1. 系 统 会 随机 生成 一 个 0~100 的 数 


字 让 玩家 猜 。 

2. 玩 家 共有 8 次 机 会 。 

3. 在 8 次 之 内 狂 到 则 游戏 成 功 ，。 

4. 点 击 “ 开 始 洲 戏 ” 进 入 游戏 画面 。 


Xx Xx X 工 作 宇 荣誉 出 品 。 


图 4-9 “游戏 规则 ”页 面 预 筑 效果 图 4-10 “关于 我 们 ”页 面 预览 效果 


由 图 可 见 , 此 时 “关于 我 们 ”页 面 设计 已 经 完 
“开始 游戏 "页面 设计 

“开始 游戏 ”页 面包 含 3 部 分 内 容 。 

。 顶部 欢迎 请 句 ; < text> 组 件 ; 

。 表单 : <form > 组 件 ; 

。 提示 语句 : < text > 组 件 。 

组 件 从 上 往 下 排列 并 且 水 平方 品 居 中 ,设计 图 如 图 4-11 所 示 。 
首先 定义 页 面容 前 (< view >),WXMLCpages/ygame/ygame. Wxml) 代 人 码 厂 7 段 如 下 : 


1]. <view class = Contalner > 
2. </view> 


然后 在 < view > 和 容 背 中 深 加 由 容 , WXML(pages/game/game. wxml) 代 人 码 片 段 修 改 如 下 : 


1. <view class = 'container'> 

2. < text > 欢迎 来 到 猜 数 字 小 游戏 </text > 

3。 < form> 

4. < input type = 'number' placeholder = ' 请 输入 0 一 100 的 数字 '></input > 
5. < button type = 'primary' form - type = 'reset'> 提 交 </button > 

6. </form> 

7. < text id = 'tip'></text > 

8. </view> 


WXSS(pages/game/game. wxss) 代 人 码 片 段 如 下 : 
1. /x 文本 框 x/ 


2. input{ 
3. border: 1lrpx solid green， /* 1rpx 宽 的 绿色 实 线 边框 x*/ 


4 margin: 30rpx 0; 

5 height: 90rpx; 

6. border — radius: 20rpx; 
1: 4 

9. 

9. /x* 提示 框 x*/ 

10. 提 tipt{ 

11. height :800rpx; 

12. | 


当前 效果 如 图 4-12 所 示 。 


表单 组 忻 
包含 输入 框 和 按钮 


提示 语句 (示例) 


图 4-11 页 面 设计 图 


/x 上 和 下 外 边 距 30rpxx / 
/* 高 度 */ 
/x* 圆 角 边框 x* / 


/A* 固定 高 度 */ 


欢迎 来 到 缚 数字 小 游戏 


| 请 输入 0~100 的 数字 | 


图 4-12 “开始 游戏 "页面 预览 效果 


由 图 可 见 , 些 时“ 开 妈 游 戏 ” 页 面 设计 已 经 完成 。 


4.4.1 游戏 页 面 的 网 辑 实现 


游戏 初始 化 


游戏 初始 化 时 需要 规定 以 下 内 容 , 顺 厅 不 限 ，。 
。 正确 答案 answer: 随机 生成 一 个 0 一 100 的 数字 ; 


二 加 | 分 数 COUNt: 0 : 
。 提示 语句 tip: 空 字 符 串 "; 
. 用 户 猜 的 数字 其 ， 一 】; 


。 游戏 状态 isGameStart: true。 


视频 讲解 


首先 在 JS 文件 (pages/ game/ game. js) 中 创建 initial 国 数 用 于 初始 化 数据 ,代码 片段 如 下 : 


1. Pagel({ 
2 本 


面 代码 如 下 : 


3 / xx 

4. * 数据 初始 化 

9 关 / 

6 initial: function() { 

7 this. SetData( { 

8. answer: Math. round(Math. random() * 100), // 随 机 数 

9. count: 0, / /回合 数 

10. 1 // 提 示 语 句 

11. 一 // 用 户 猿 的 数字 
2 isGameStart: true // 游 戏 已 经 开始 
3， }); 

14. 1}, 

16. }) 


然后 在 onLoad 国 数 中 进行 调用 ,JS 文件 (pages/game/game.js) 代 人 码 厂 段 如 下 : 


1. onLoad: function(options) { 


this. initial( ); 

3 1 

此 时 可 以 在 页 面 加 载 后 开始 游戏 。 

获取 用 万 输入 的 数字 

为 输入 框 添加 bindinput 事件 ,修改 后 WXML (pages/game/game. 
wxml) 页 面 代 公 如 下 : 

1]. <Vlew class= ContalneTr > 

2. < text > 欢迎 来 到 狂 数 字 小 游戏 </text > 

3. < form> 

4. < input bindinput = 'getNumber' type = 'number' placeholder = ' 请 输入 0 一 100 的 数字 '></input > 

5. < button type = 'primary' form — type = 'reset'> 提 区 </button > 

6. </form> 

7. < text id = 'tip'></text > 

8. </view> 

上 述 代 人 码 表 示 当 点 击 按 钮 时 文本 框 失 去 焦点 并 触发 日 定义 的 getNumber 函数 ，。 

在 JS 文件 (pages/game/game.js) 中 添加 getNumber 图 数 ,代码 片段 如 下 : 

1. Page({ 

2 . 

3 / xx 

4 x 获取 用 户 输入 的 数字 

5. * 

6 getNumber: function(e) { 

7 this. setData( {x:e. detail. value}) 

8 }， 

10. 月 

游戏 过 程 


为 按钮 瀛 加 bindtap 事件 ,修改 后 WXML(pages/game/game. wxml) 页 


1. <view class = 'container'> 
2. < text > 欢迎 来 到 猿 数 字 小 游戏 </text > 


3., < form> 


to ~] nn 


上 述 代 码 表 示 当 点 击 按钮 时 触发 自 定 义 的 guess 函数 。 


< input bindblur = 'gqetNumber' type = 'number' placeholder = ' 请 输入 0 一 100 的 数字 '></input > 
< button type = 'primary' form— type = 'reset' bindtap = 'guess'> 提 区 </button > 

</form> 

< text jd = 'tip'></text > 
</view> 


在 JS 文件 (pages/game/game.js) 中 添加 guess 函数 ,代码 片段 如 下 : 


1 
2 
3 
4 
3 
6 
了 
8 


9 


10. 
11. 
iz 
13: 
14. 
15. 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
3. 
24. 
25. 
26. 
21. 
28. 
29. 
30. 
31. 
32. 
了 
34. 
Co 
36. 
37. 
38. 
39. 
40. 
41. 
42. 
43. 
44. 
45 . 
46 . 
47. 
48. 
49. 


Pagel({ 


/ 关 尖 


}) 


* 本 回合 开始 猎 数 字 
*/ 


guess: function() { 


// 获 取 用 户 本 回合 填写 的 数字 
let x = this. data. <; 

// 重 置 x 为 未 获得 新 数字 状态 
this. setData( {x: — 1}); 


if (x<0) I 
wx. SshowToast( { 
title: ' 不 能 小 于 0', 
}); 
} else if (x> 100) { 
wx. ShowToast( { 
title: ' 不 能 大 于 100'，, 
}); 
} else { 
// 回合 数 增加 1 
let count = this.data.count + 1; 
// 获 取 当 前 提示 信息 
let tip = this. data.tip; 
// 获取 正确 答案 


let answer = this. data. answer; 


if (x == answer) { 


tip += "nn 第 ' + count + “回合 :+ x + ', 猜 对 了 !'; 


this. setDatal(l {isGameStart: false}); 
} else if (x> answer) { 


// 游 戏 结 束 


tip += "An 第 ' + count + ' 回 合 : "+ 和 + ', 大 了 !'; 


} else { 


tip += '\n 第 ' + count + ' 回 合 : "+ x+ ', 小 J 了!'; 


| 


if (count == 8) { 

tip += ' \n 游戏 结束 '; 

this. setData({ isGameStart: false }); 
} 


// 更 新 提示 语句 和 回合 数 
this. setDatal( { 

tip: tip, 

count: count 


1 ); 


// 游 戏 结束 
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运行 效果 图 如 图 4-13 所 示 。 


二 二 面 自生 East 二 


欢迎 来 到 狂 数 子 小 游戏 欢迎 来 到 铺 数字 小 游戏 


第 1 回合 : 50 ,大 了 |! 
第 2 回合 : 20 ,大 了 |! 
第 3 回合 : 10 , 大 了 | 


(a) 游戏 开始 (b) 游戏 过 程 
图 4-13 ”游戏 效果 图 
游戏 结束 


当 游 戏 结 束 时 隐 泪 输入 框 和 “提交 ”按钮 ,只 显示 “重新 开始 ”按钮 。 修 改 
后 WXML(pages/game/game. wxml) 页面 代码 如 下 : 


1 <Vlew Class= ‘container'> 

2 < text > 欢迎 来 到 猜 数 字 小 游戏 </text > 

了 了。 <form> 

4. < block wx: if = '{{isGameStart}}'> 

5 < input bindblur = 'getNumber' type = 'number' placeholder = ' 请 输入 0 一 100 的 数字 '> 
</input > 

6. < button type = 'primary' form— type = 'reset' bindtap = 'guess'> 提 区 </button > 
Fs. </block > 

8. < block wx:else> 

9. < button type = 'primary' bindtap = 'restartGame'> 重 新 开始 </button> 

10. </block > 


11. </form> 
12. <text id = 'tip'>{{tip}}</text > 
13. </view> 


上 述 代 码 使 用 了 wx:if 属性 配合 < block > 代码 块 形成 两 种 情况 , 即 在 游戏 中 只 显示 输入 
框 和 “提交 ”按钮 ,游戏 结束 时 只 显示 “重新 开始 ?按钮 。 
在 JS 文件 (pages/ygamey game. js) 中 添加 restartGame 图 数 , 代 但 片段 如 下 : 


Pagel { 


] 

2 二 

3. / xx 

4. * 游戏 重新 开始 
5 *x/ 

6 restartGame: function() { 
7 this. initial( ); 


组 件 ， 猜 数字 


. 


8. }, 
9. 
10. 用) 


运行 效果 图 如 图 4-14 所 示 。 


旨 委 生硬 重 和 Chat 二 23-16 nT 上 十 二 重生 Chat = 


< | Ee < 
欢迎 来 到 鳍 数字 小 游戏 欢迎 来 到 靖 数 字 小 游戏 


| 请 输入 0~100 的 数字 | 


第 1 回合 : 50 , 大 了 ! 
第 2 回合 : 20 , 大 了 ! 
第 3 回合 : 10 , 大 了 ! 
第 4 回合 :5 ,大 了 |! 
第 5 回合 :3 ,小 了 ! 
第 6 回合 : 4， 竹 对 了 ! 


(a) 游戏 结束 (b) 诉 戏 和 车 新 开始 
4-14 游戏 结束 效果 图 


4.4.2 首页 的 有 逻辑 实现 


下 面 将 app. json 中 页 面 的 路 径 位 置 重新 幸 整 ,使 得 index 为 第 一 个 显示 
的 页 面 ,然后 为 3 个 按钮 分 别 添加 bindtap 事件 ,WXML 文件 (pages/index/ 
index. wxml) 代 码 如 下 : 


< VIew class = “Contalner > 
< button bindtap = 'goToGame' type = 'primary'> 开 始 游 戏 </button > 
< button bindtap = 'goToRules' type = 'primary'> 游 戏 规则 </button > 
< button bindtap = 'goToAbout' type = 'primary'> 关 于 我 们 </button > 
</view> 


JS 文件 (pages/index/index. js) 代 人 码 如 下 : 


(i 


Pagel { 


goToGame( ){ 
wx. navigateTo( { 


}) 
}, 
goToAbout() { 
wx. navigateTo( { 
10. url: '../about/about', 
11. }) 


1] 
2 
3 
4 
5. url: '../game/game'", 
6 
1 
日 
9 
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12. }, 

13; goToRules() { 

14. wx. navigateTol( { 

15. url: '../rules/rules', 

16. }) 

17. }， 

18. 

19. 月 ) 

此 时 已 全 部 完成 ,保存 后 重新 预览 项 目 , 最 终 效 打 图 如 图 4-15 所 示 。 


[TTTT EDS Ti a 和 二 生硬 和 Weel -hats 


< 


欢迎 来 到 畏 数字 小 游戏 


| 清 输入 0~100 的 数字 | 


关于 我 们 


(b) 跳 转 到 “开始 游戏 ” 页面 


章 生 本 hat = 二 二 二 种 


Cl = 


1. 系 统 会 随机 生成 一 个 0~100 的 数 


字 让 玩家 猜 。 

2. 玩 家 共有 8 次 机 会 

3. 在 8 次 之 内 独到 则 游戏 成 功 ， 

4 点 击 “ 开 始 游戏 ”进入 游戏 画面 。 


Xx X X 工 作 室 荣誉 出 品 ， 


(0) 由 村 到 “ 洲 戏 规则 ”页 面 (由 跳 村 到 “关于 我 们 ”页 面 
图 4-15 最终 效 果 图 


4.5.1 主体 文件 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


1. 1{ 

2 “pages : | 

3. "pages/ index/ index" ， 
4 . "pages/game/game", 

5 "pages/about/about", 
6. "pages/rules/rules" 
7, ] 

8. } 


app. wxss 文件 的 完整 代码 如 下 : 


1. /x* 育 景 容 冀 样式 */ 

2 . Container{ 

3 display: flex; /x* flex 模型 布局 */ 

4. flex— direction: column; /* 和 玲 直 布局 */ 

e align— items: center; /水 平方 器 居 中 x* / 

6 height: 100vh; /* 高 度 为 100 视窗 ,写成 100% 无效 */ 
7 Justify— content: space 一 around ; /* 内 容 调 整 * / 

8. 1] 

9. /x 文本 样式 x*/ 

10. text{ 

1l1l. margin:0 50rpx; /*# 左右 外 边 距 50rpx* / 
12. line— height: 30pt; /¥* 行 高 30ptx/ 

13. |】 


4.5.2 首页 代码 展示 


JSON 文件 (pages/index/index. json) 的 完整 代码 如 下 : 


1. 1 
2. "navigationBarTitleText" :" 猜 数字 小 游戏 " 
: 


WXML 文件 (pages/index/index. wxm1l) 的 完整 代码 如 下 : 


1 < Vlew class= 'container'> 

2 < button bindtap = 'goToGame' type = 'primary'> 开 始 游 戏 </button > 
: < button bindtap = "goToRules' type = 'primary'> 游 戏 规则 </button > 
4 < button bindtap = "goToAbout' type = 'primary'> 关 于 我 们 </button > 
5 </view> 

WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 

1. /x* 按钮 样式 */ 

2. buttont{ 

3. width: 350rpx; /x 宽度 x |/ 

4. |} 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 ， 


1. Pagel({ 

2 goToGame() { 

3 wx. navigateTol( { 

4. url: '../game/game', 
si }) 

6 }, 

7 goToAbout() { 

8 wx. navigateTo( { 

9 . url: '../about/about'， 
10. }) 

11. a 

12. goToRules() { 

13. wx. navigateTo( { 

14. url: '../rules/mles', 
1 }) 

16. } 

17. }) 


4. 5.3 “游戏 规则 ”页 面 代码 展示 


JSON 文件 (pages/rules/rules. json) 的 完整 代码 如 下 : 


1. 1 
2. "navigationBarTitleText" : "游戏 规则 " 
3 】} 


WXML 文件 (pages/rules/rules. wxml) 的 完整 代码 如 下 : 


< VlIewW Class = 'container'> 
< text > 
1. 系统 会 随机 生成 一 个 0 一 100 的 数字 让 玩家 猜 . 
2. 玩家 共有 8 次 机 会 . 
3. 在 8 次 之 内 猜 到 则 游戏 成 功 . 
4. 点 击 " 开 始 游戏 "进入 游戏 画面 . 
< /七 ext > 
</View> 


DN 


4. 5.4 “关于 我 们 ”页 和 面 代码 展示 


JSON 文件 (pages/about/about. json) 的 完整 代码 如 下 : 


1. 1 
2. "navigationBarTitleText": "关于 我 们 " 
3. } 


WXML 文件 (pages/about/about. wxm1l) 的 完整 代码 如 下 : 


1. <view class = 'container'> 
2. <text>Xx x x 工作 室 荣 誉 出 品 .</text > 
3. </view> 


4.5.5 开始 游戏 (game) 代 码 展示 


JSON (pages/game/game. json) 完 整 代 码 如 下 : 


1. 1 
-时 "navigationBarTitleText": "开始 游戏 " 
3. } 


WXML(pages/game/game. wxml) 完 整 代 码 如 下 : 


1. <vView class = 'container'> 

2 < text > 欢迎 来 到 猜 数 字 小 游戏 </text > 

3. 

4. < form> 

< block wx:if = '{{isGameStart}}'> 

6. < input bindinput = 'getNumber' type = 'number' placeholder = "请 输入 0 一 100 的 数字 "></input > 
7. < button type = 'primary' form— type = 'reset' bindtap = 'guess'> 提 区 </button > 
8. </block > 

9. < block wx:else> 

10. < button type = 'primary' bindtap = 'restartGame'> 重 新 开始 </button > 

11. </block > 

12. </form> 

13. 


14. <text id= 'tip'>{{tip}}</text > 
15. </view> 


WXSS(pages/game/game. wxss) 完 整 代 码 如 下 : 


1. /x 文本 框 */ 

2. inputl{ 

了 border: lrpx solid green; /x* 1rpx 宽 的 绿色 实 线 边框 x*/ 
4. margin: 30rpx 0; /x* 上 下 外 边 距 30rpx* / 
ns height: 90rpx; /* 高 度 x*/ 

6. border — radius: 20rpx; /¥* 圆 角 边框 x / 

7. } 

8. 

9. /x 提示 框 */ 

10. #tipt{ 

11. height :800rpx; /< 固定 高 度 */ 

12. } 


JSCpages/ygame/ygame. js) 完 整 代 码 如 下 : 


1. Page({ 

2 / x 

3 * 数据 初始 化 

4. 关 / 

5 . initial: function( ) { 

6. this. setDatal { 

7. answer: Math. round(Math. random() ¥* 100)， // 随 机 数 

8. count: 0, // 回 合 数 

9. tip: ”， // 提 示 语 人 句 

10., i // 用 户 猜 的 数字 
11. isGameStart: true // 游 戏 已 经 开始 


SS 
ho 


ys 


}, 

/ x 
* 获取 用 户 输入 的 数字 
关 / 


getNumber: function(e) { 
this. setData({ x : e.detail. value} ); 
1 
/ ¥¥ 
x* 本 回合 开始 猜 数 字 
*/ 
guess: function() 1{ 
// 获取 用 户 本 回合 填写 的 数字 
let x = this. data. x; 
// 重 置 x 为 未 获得 新 数字 状态 
this. setData( {x: 一 工 })，; 


if (x<0) { 
wx. ShowToast({ 
title: ' 不 能 小 于 0', 
}); 
} else if (x> 100) 1 
wx. ShowToast( { 
title: ' 不 能 大 于 100'，, 
}); 
} else 1 
// 回 合 数 增加 1 
let count = this. data.count + 1; 
// 获 取 当 前 提示 信和 县 
let tip = this. data.tip; 
// 获取 正确 答案 


let answer = this. data. answeTr:; 


if (x == answer) { 


tip += '\n 第 ' + count + "回合 :" + x + ', 猜 对 了 !'; 


this. setDatal( {isGameStart: false} ); 


} else if (x> answer) { 


// 游 戏 结束 


tip += ' An 第 ' + count + ' 回 合 :"+ x+ ', 大 J 了 !'; 


} else { 


tip += "An 第 ' + count + ' 回 合 :" + x+ ', 小 了 !'; 


} 


if (count == 8) { 
tip += "An 游戏 结束 '; 


this. setDatal({ isGameStart: false }); 


// 里 新 提示 语句 和 回合 数 
this. setDatal { 

tip: tip, 

count: count 


}, 
/ x 
* 游戏 重新 开 妈 


// 游 戏 结束 


| 


x 
restartGame: function() { 
this., initial( ); 
}, 
/ x 
* 生命 周期 函数 -- 监听 页 面 加 载 
x 
onLoad: function(options) { 
this. initial( ); 
bs 


本 和 齐 主 要 介绍 使 用 小 程序 网 络 API 的 相关 应 用 制作 一 球 天 气 查 询 小 程序 


。 掌握 服务 器 域名 配置 和 临时 服务 器 部 署 ; 
。 掌握 Wx. request 接口 的 用 法 。 


5.1 准备 工作 


本 小 节 主 要 介绍 如 何 申 请 获得 开源 API 的 密 钥 。 这 里 选择 了 可 以 提供 全 球 气 象 数 据 服 
务 接口 的 和 风 天 气 API, 其 官方 网 址 为 “https://www. heweather. com/”*( 如 图 5-1 所 示 )。 


权 | 和 风 天 和 气 


者 中 
让 我 们 为 你 提供 商业 化 天 气 数据 解决 方案 
天气 堵 据 API 
天 气 大 数据 
行业 天 气 解决 方案 
智能 推送 服务 


用 户 选 择 “ 饮 费用 户 ” 类 型 ,使 用 邮箱 进行 注册 并 激活 后 可 以 获取 三 天 之 内 全 球 各 地 区 的 
实时 天 气 ,免费 接口 调用 流量 为 1000 次 /天 、 频 率 为 200 次 /分 钟 ,该 数据 基本 上 可 以 满足 读者 
的 开发 学 习 需 求 。 

注册 完毕 之 后 可 以 访问 “https://console. heweather. com/my/service” 来 查看 账号 信息 ， 
用 户 登 录 后 即 可 看 到 开发 者 申请 到 的 个 人 认证 key, 如 图 5-2 所 示 。 

开发 者 需 记录 上 述 页 面 中 的 个 人 认证 key, 该 信息 在 小 程序 发 出 网 络 请 求 时 会 作为 号 份 
识别 的 标识 一 并 发 送 给 和 风 天 气 的 第 三 方 服务 大 。 至 此 ,开源 API 的 密 钥 申请 就 已 经 顺利 完 
成 ,读者 可 以 进行 5. 1. 2 节 的 学 习 , 了 解 如 何 调用 API 获取 气象 数据 。 


加 和 风 天 号 | 控制 台 


扩大 首 

/ 控制 台 
我 的 柠 制 台 

购买 记 也 


用 ED: HETTOT261830021507 


5-2 个 人 认证 key 查询 页 面 (访问 时 间 : 2018.10.27 10:27) 


s.1.2 API 调用 方法 


目前 免费 用 户 可 以 调用 的 最 新 版 接口 地 址 为 “https:// free-api， 
heweather. com/s6/”, 其 服务 兹 方 点 在 中 国境 内 。 该 接口 地 址 后 面 追 加 不 同 z 
的 关键 词 将 获取 不 同 种 类 的 气象 数据 信息 ,例如 alarm 为 天 气 自然 灾害 预警 。 
读者 可 以 访问 官方 文档 (https://dev. heweather. com/docs/api/) 了 解 各 类 关键 词 的 使 用 
A 

本 示例 将 选用 关键 词 weather 进行 实况 天 气 数 据 的 获取 。 实 况 天 气 即 为 当前 时 间 点 的 天 气 状 
况 以 及 温 / 湿 / 风 / 压 等 气象 指数 ,具体 包含 体感 温度 、 实 测 温度 、 天 气 状况 、 风 力 、 风 速 、 风 癌 、 相 对 湿 
度 .大 气压 蝇 、 降 水 量 、 能 见 度 等 。 目 前 该 接口 允许 查询 的 城市 覆盖 范围 为 全 球 任 意 一 个 城市 。 

基于 关键 词 weather 的 接口 具有 两 个 必 填 参数 和 两 个 可 选 参数 ,如 表 5-1 所 示 。 


表 5-1 weather 接口 参数 一 览 表 


参数 名 称 | 参数 类 型 解释 


用 于 规定 需要 查询 的 城市 ,可 以 填 人 城市 名 称 ( 国 内 城市 填 中 文 或 拼音 均 
可 ) ,城市 ID .IP 地 址 或 经 纬度 。 

例如 : 

city 一 北京 ,city 二 beijing( 城 市 名 称 ) 

city 二 CN101010100( 城 市 ID) 

city 一 60. 194. 130. 1(IP 地 址 ) 

city 一 120. 343,36. 088( 经 纬度 ) 

需要 填 入 用 户 的 个 人 认证 key 字符 串 。 接 口 将 通过 该 数据 判断 是 否 为 授 
权 用 户 ,并 可 以 进一步 判断 是 否 为 付费 用 户 。 

例如 : key 王 123abc456dfg 

用 于 指定 数据 的 声言 版 本 ,不 添加 lang 参数 则 默认 为 简体 中 文 。 

例如 : lang 一 en 

需要 注意 的 是 ,国内 茶 些 特定 数据 (例如 生活 指数 .空气 质量 等 ) 不 文 持 多 
语言 版 

单位 选择 ,公制 (m) 或 喘 制 中 ,上 默认 为 公制 单位 。 

例如 : unit 二 i 

详 见 表 5-2“ 度 量 衡 单位 一 览 表 ” 


Clty 


lang 


unit 


其 中 与 unit 参数 相关 的 公制 和 英制 单位 对 比如 表 5-2 所 示 。 
表 5-2 度量 衡 单 位 一 贤 表 


TT 宇 民 度 ， 


风速 公里 /小 时 : km/h 现 里 /小 时 : mile/h 
能 见 遍 关于， ni 
大 气 不 语 相 hPa 
降水 县 来: mm 


0 微克 /立方 米 : 微克 /立方 米 : pg/m 
I 微克 /立方 米 : 微克 /立方 米 : pg/mi 
a 微克 /立方 米 : 微克 /立方 米 : pg/mi 
0 微克 /立方 米 : 微克 /立方 米 : pg/ms 
毫克 /立方 米 : 毫克 /立方 米 : mg/mi 


hs. 微克 /立方 米 : 微克 /立方 米 : hg/ms 
注意 : 部 分 数据 项 无 论 选择 何 种 单位 均 会 使 用 公制 单位 。 


免费 用 户 调用 接口 的 第 见 语法 格式 如 下 : 
https://free— api. heweather. com/s6/weather/now?|[ parameters] 


其 中 Lparameters] 需 要 替换 成 使 用 到 的 参数 ,多 个 参数 之 间 使 用 & 符号 隔 开 。 
例如 ,使 用 拼音 查询 上 海 市 天 气 数据 的 写法 如 下 : 


https://free— api. heweather. com/s6/weather/now?location = shanghaig&key = 1234abcd 
注意 ,其 中 key 的 值 1234abcd 为 随机 填写 的 内 容 , 请 在 实际 开发 中 将 其 蔡 换 为 真实 的 个 


人 认证 key, 否 则 接口 将 无 法 获取 数据 。 
用 户 可 以 直接 将 这 段 地 址 输入 到 浏览 硕 的 地 址 栏 中 测试 数据 返回 结果 ,如 图 5-3 所 示 。 


{"HeWVeather6":[{"basic": {"cid”:"CNHIO1020100","location":" 上 海 ", "parent city”":" 上 
有 有" “admin area" :上海 "cnt 呈 :中 
国 ”, "lat”": “3 了 1.23170662” ”lo :121.47264099”，“tz” :+S.00"}] update" :人 1oc”": "2018-10- 


27 10:456”，utc : 2018-10-27 023:45 |， 3tatus :OK ,” 

{cloud”:"0","cond code": 100" cond txt”:" 有 晴 ", “fl1":"17","hum:" "19","pcpn’:" 0.0","pr 
es" 2" 1024d", "tmp":" "19", "wis :" 10" "wind dee”:"315", "wind dir :四 北 

网 ”wind se’:"1", "wind spd":"4"}}]]} 


图 5-3 免费 天 气 查 询 接 口 返回 结果 页 面 ( 访 问 时 间 : 2018. 10.27 10:59) 


由 该 图 可 知 , 指 定 城 市 的 天 气 数据 返回 结 来 是 JSON 数据 格式 的 文本 内 容 , 其 中 包含 的 数 
据 是 以 “名 称 : 值 ”的 形式 存放 。 
为 方便 用 户 查 看 ,将 图 5-3 返回 的 数据 内 容 整 理 格式 如 下 : 


{ 
“HeWeather6 :[ 
{ 

"basic :1 
"cid":"CN101020100", 
"location" :" 上 海 "， 
"parent_city" : "上海 "， 
"admin area" :" 上 海 "， 
"cnty" :" 中国 "， 
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"lat":"31.23170662", 
"lon":"121.47264099", 
"tz":" + 8.00" 

}, 

"update™ :1 
"loc":"2018-— 10- 27 10:45”， 
‘utc : 2018 一 10 一 27 02:45 

}, 

"status" :"ok", 

"now :1{ 

"Cloud : 0 ， 

"cond code":"100", 

"cond txt" :" 睛 "， 

hum : 19 ， 

有 Pcpn :0.0 六 
“Pres : 1024 ， 
"tmp":"19", 
‘vis : 10 ， 
"wind_deg":"315", 
"wind dir":" 西 北 风 "， 
"wind sc : 1 ， 
"wind spd : 4- 

} 
} 

] 

} 


返回 的 字段 说 明 如 表 5-3 所 示 。 
表 5-3 实况 天 气 返 回 字 段 说 阴 
basic: 基础 信息 
参 数 


location 地 区 /城市 名 称 海 省 
cid 地 区 /城市 ID CN101080402 


示 例 值 


lat 地 区 /城市 纬度 39. 956074 
parent_city 该 地 区 /城市 的 上 级 城市 北京 
admin_area 该 地 区 /城市 所 属 行政 区 域 北京 
cnty 该 地 区 /城市 所 属国 家 名 称 中 国 


tz 该 地 区 /城市 所 在 时 区 8 
update: 接口 更 新 时 间 


允 示 例 全 


loc 当地 时 间 ,24 小 时 制 ,格式 为 yyyy-MM-dd HH :mm 2017/10/25 12 ;34 
utc UTC 时 间 ,24 小 时 制 ,格式 为 yyyy-MM-dd HH :mm 2017/10/25 4;34 


now: 实况 天 气 

Sg 去 全 
体感 温度 ,默认 单位 为 摄氏 度 
tmp 温度 ,默认 单位 为 摄氏 度 | 
cond code 实况 天 气 状 况 代码 100 


cond_txt 实况 天 气 状 况 描述 晴 


{] 


榴 O 第 5 章 小 程序 网 络 AP1 . 天 气 查询 医 


续 表 
参 数 
wind deg 
wind dir 
wind sc 
wind spd 
hum 
pcpn 
pres 


Vls 


cloud 
status: 接口 状态 


允 去 例 从 


接口 状态 ,具体 含 i 


status 


襄 明 Ba 


其 中 参数 status 的 状态 码 及 错误 码 说 明 如 表 5-4 所 示 。 
表 5-4 接口 状态 码 及 错误 码 说 了 明 


代 码 说 明 
ok 数据 正常 
invalid key 第 误 的 key, 请 检查 key 是 否 输入 以 及 是 否 输 和 人 有 误 
unknown location 未 知 或 错误 城市 /地 区 


no data for this location 该 城市 /地 区 没有 所 请 求 的 数据 
超过 访问 次 数 , 需 要 等 到 当月 最 后 一 天 24 点 (免费 用 户 为 当天 24 点 ) 后 进行 
访问 次 数 的 重 置 或 升级 访问 量 


no more requests 


param invalid 参数 铺 误 ,请 检查 传递 的 参数 是 否 正 确 

too fast 超过 限定 的 QPM, 请 参考 QPM 说 明 

dead 无 啊 应 或 超时 ,接口 服务 异常 请 联系 产品 开发 商 
permission denied 无 访问 权限 ,没有 购买 所 访问 的 这 部 分 服务 

slgn error 签名 错误 ,请 参考 签名 算法 


如 果 接 口 无 法 正确 地 获取 数据 ,可 以 根据 状态 码 对 比 该 表 查 询 原因 。 
用 户 可 以 根据 指定 的 名 称 找到 对 应 的 数据 值 ,例如 在 实况 天 气 数据 (now) 中 可 以 查 到 当 
前 城市 的 温度 ,对 应 的 字段 节选 如 下 ， 


于 tmp” * Tr 19 下 


上 述 代码 表示 当前 城市 的 温度 为 19"C 。 
5.1.3 服务 如 域名 配置 


每 一 个 小 程序 在 与 指定 域名 地 址 进行 网 络 通信 前 都 必须 将 该 域名 地 址 汪 
加 到 管理 员 后 人 台 上 日 名 单 中 ,因此 本 示例 需要 对 域名 地 址 “https:/ /free-api， 
heweather. com” 进 行 服 务 需 配置 。 视频 讲解 

小 程序 开发 者 登录 mp. weixin. qq. com 进入 管理 员 后 台 , 单 击 “ 设 置 ?按钮 ,切换 至 “开发 设置 ” 


。 开发 


= (Cree ) 开 当 者 工 上 。 ” 按 口 请 如 


开发 者 ID 
基 妆 者 加 


AppIDt 上 程 斥 1Di) Wal9079110a00 eds 


AppSerret[ 小 悍 序 大 和 铀 ) 
3 


订 疝 消息 a 
= 村 


EE 


hitpss/ fapt.shanbay.cem 


hipsi/dag.ahnu,edu.en 
https dev,ahniedu.en 
感性 httpssi/ doubanuleee.com 


5-4 ”服务 器 域名 配置 


将 当前 需要 使 用 的 接口 添加 到 “request 合法 域名 ”中 ,配置 完成 后 再 登录 小 程序 开发 工具 
就 允许 小 程序 与 指定 的 服务 天 域名 地 址 之 间 的 网 络 通信 了 ,注意 每 个 月 只 可 以 申请 修改 5 次 
服务 盘 域 名 配置 。 


本 项 目 创建 选择 空白 文件 来 weatherDemo ,效果 如 图 5-5 所 示 。 视频 讲解 
导入 项 目 


项 目 和 名称“ weatherDemo 
目录 EAwxdemo_workspaceweatherDemo 
ApplD wx19079110a0fD1esa 
若 无 ApplD 可 注册 
或 使 用 测 臧 号 
小 程序 
人 不 使 用 云 服务 
“小 程序 - 云 开 发 


建 服务 露 ， 使 用 平台 提供 的 API 进行 核心 业务 开发 ， 即 可 实现 小 程序 快速 上 绪 和 
注 代 。 了 解 详情 


_】 腾讯 云 


JavaScript 


图 5-5 小 程序 项 目 填写 效果 示意 图 


| 


单 击 “ 新 建 ” 按 钮 完成 项 目 创建 ,然后 准备 手动 创建 页 面 配置 文件 。 


5.3.1 创建 页 面 文件 


项 目 创建 完毕 后 ,在 根 目录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 一 般 来 说 首页 默 
认命 名 为 index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 称 可 以 自 定义 。 本 项 目 只 需要 保 
留 自 页 (index) 即 可 。 

具体 操作 如 下 : 

(1) 将 app.json 文件 内 pages 属性 中 的 “pages/logs/logs 删除 ,并 删除 上 一 行 末 尾 的 
逗号 。 


(2) 按 快 捷 键 Ctrl 十 $ 保存 当前 修改 。 
5.3.2 央 除 和 修改 文件 


具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 月 
动 补 全 图 数 ( 如 图 5-6 所 示 ) 。 


index .js 者 


/lindex,.js 


tunction WO 


TH Pe 

WD getCurrentPpages 

全 > package 

FP pauseBackgroundAudio 
AP previewImage 

AP canvasPutImageData 


5-6 输入 关键 词 创 建 Page 困 数 


(5) 删除 app. wxss 中 的 全 部 代码 。 
(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 日 动 
补 全 因数 (如 图 5-7 所 示 ) 。 


app.Is 本 
1 /fapp.js 


[a 
function Oh 
内 


5-7 输入 关键 词 创建 App 函数 


5.3.3 创建 其 他 文件 


接 下 来 创建 其 他 上 自 定 义 文 件 ,本 项 目 还 需要 一 个 文件 夹 用 于 存放 天 气 图 标 素材 。 文 件 夹 名 
称 由 开发 者 目 定 义 ( 例 如 images) , 单 击 目录 结构 左上 角 的 十 号 创建 文件 夹 并 命名 为 images。 
本 项 目 用 到 的 图 标 和 素材 共 计 75 个 , 均 来 源 于 和 风 天 气 官网 ,图 标 泰 材 展 示 如 图 5-8 所 示 。 


om | 


lenai 


央 共 


市 有 字母 n, 表 示 夜 间 天 气 图 标 , 例 如 100n. png。 


右 击 目录 结构 中 的 images 文件 夹 ,选择 “ 便 盘 打开 ”, 在 该 文件 夹 中 新 建 二 级 目录 weather 
_icon, 然 后 将 图 标 文件 全 部 复制 .粘贴 进去 。 完 成 后 的 目录 结构 如 图 5-9 所 示 。 


图 5-8 天气 图 标 素 材 展 示 


其 中 图 标 文件 名 为 对 应 的 天 气 代码 ,扩展 名 均 为 . png。 需 要 注意 的 是 ,部 分 图 标 文件 名 


| #|-G- 


| 


翌 
加 


习 
加 


有 


S 
吾 
2 
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图 5-9 页 面 文件 创建 完成 
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准 Q 第 5 章 小 程序 网 


“ 天 气 查询 


此 时 文件 配置 就 全 部 完成 ,5.4 太 将 正式 进行 页 面 布局 和 样式 设计 。 


5.4.1 导航 栏 设计 


小 程序 默认 导航 栏 是 黑帮 日 字 的 效果 ,因此 需要 在 app. json 中 上 月 定义 导航 栏 标题 和 背景 
颜色 。 更 改 后 的 app. json 文件 代码 如 下 : 

1. 1 

2 m pages" [ 

人 "pages/ index/ index" 

4. ]， 

5 "Window : { 

6. " navigationBarBackgroundColor": " # 3883FA", 

了。 "navigationBarTitleText": "今日 天 气 " 

8. } 

9. } 


上 述 代 码 可 以 更 改 所 有 页 面 的 导航 栏 标题 文本 为 
“今日 天 气 ”、 育 景 类 色 为 蓝 色 (#3883FA)。 预 宽 效 果 如 
图 5-10 所 示 。 


5.4.2 页 面 设计 


页 面 上 主要 包含 4 个 区 域 ,具体 内 容 解 释 如 下 。 
。 区 域 1: 地 区 选择 右 , 用 户 可 以 自行 选择 查询 的 省 ,市 、 区 ; 

。 区 域 2: 显示 当前 城市 的 温度 和 天 气 状 态 的 文字 说 明 ; 

。 区 域 3: 显示 当前 城市 的 天 气 图 标 ; 

。 区 域 4: 分 多 行 显示 其 他 天 气 信息 ,例如 湿度 .气压 能见度 和 风 癌 等 。 
注音 ,面板 之 间 宕 要 有 一 定 的 回 阳 距离 ,设计 图 如 图 5-11 所 示 。 
计划 使 用 如 下 组 件 。 

。 页 面 整 体 : < view > 组 件 , 并 定义 class 二 'container'; 

。 区 域 1: < picker > 组 件 ; 

。 区 域 2, < text > 组 件 ; 

。 区 域 3; <image > 组 件 ; 

。 区 域 4; < view > 组 件 , 并 定义 class 一 'detail' ; 

。 区 域 4 内 单元 行 : 4 个 < view > 组 件 , 并 定义 class 一 'bar'; 

。 区 域 4 内 单元 格 ; 每 行 3 个 < view > 组 件 , 并 定义 class 一 'box'。 
整体 容器 设计 

首先 定义 页 面容 天 (< view>),WXML(pages/index/index. wxml) 人 代码 片段 如 下 : 


视频 讲解 


1. <view class = "Contalner "> 
2. </view> 


在 app. wxss 中 设置 容 表 样式 ,代码 片段 如 下 : 


1. /* 和 上 景 容 和 大 样式 关 / 

2. .containert{ 

3. height: 100vh:; /xx 高度 为 100 视窗 ,写成 100 无 效 */ 
4. display: flex; /* flex 布局 模型 x / 

5 flex— direction: column; /< 垂直 布局 <V/ 

6. align— items: center; /水 平方 呵 居 中 */ 

7. justify 一 content:space 一 around; /* 调整 间距 x*/ 

8. } 


当前 效 末 如 图 5-12 所 示 。 


图 5-11 页 面 设计 图 图 5-12 ”页面 预 览 效 果 


由 于 还 设 有 添加 组 件 元 系 ,所 以 疝 看 不 出 来 flex 布局 模型 效果 。 

区 域 1( 地 区 选择 器 ) 设 计 

区 域 1 需要 使 用 < picker > 组 件 来 实现 一 个 地 区 选择 需 , 用 户 点 击 可 切换 选择 其 他 城市 。 
WXML(pages/index/index. Wxml) 代 码 片 段 修改 如 下 : 


1. <view class= Contalner > 

2. <!-- 区 域 1: 地 区 选择 器 --> 
we < picker mode = 'region'> 

4. < view> 北 京 市 </view> 

5 </picker > 

6. </view> 


< picker > 组 件 内 部 是 开发 者 任意 填写 的 一 个 城市 名 称 , 当 前 效果 如 图 5-13 所 示 。 

由 图 可 见 , 点 击 城市 名 称 时 会 从 的 部 弹出 控件 ,用 户 可 以 进行 省 、 市 、 区 的 选择 。 

区 域 2( 文 本 ) 设 计 

区 域 2 需要 使 用 < text > 组 件 实现 一 个 单行 天 气 信息 ,包括 当前 城市 的 温度 和 天 气 状 况 。 
WXML(pages/index/index. wxml) 代 码 片 段 修改 如 下 : 


(a) 页 面 初 妇 效 二 (b) 点 击 城市 名 称 时 的 效果 
图 5-13 区 域 1 预览 效果 


< VlIeWwClass = Contalner > 


<!- 一 区域 1: 地 区 选择 需 --> 


<!-- 区 域 2: 单行 天 气 信息 --> 
< text > 19C 随 </text > 
</Vview> 


WDPP 


WXSS(pages/index/index. wxss) 人 代码 上 请 段 如 下 : 


1. /x 文本 样式 x*/ 

2. textf{ 

了. font — size: 80rpx; 
4 color: # 3C5F81 ; 

5 4 


当前 效果 如 图 5-14 所 示 。 

当前 显示 的 文本 内 容 由 开发 者 自 定义 , 待 查询 到 实际 数据 后 将 动态 更 新 文本 内 容 。 
区 域 3( 天 气 图 标 ) 设 计 

区 域 3 需要 使 用 < image > 组 件 展示 当前 城市 的 天 气 图 标 。 
WXML(pages/index/index. wxml) 代 码 片段 修改 如 下 : 


< Vlew Class = “Contalner > 


<!- 一 区域 1: 地 区 选择 髓 -一 > 
<! 一 一 区域 2: 单行 天 气 信息 --> 
<!-- 区 域 3: 天 气 图 标 -- > 


< image src= '/ images/weather icon/999. png' mode = 'widthFix'></ image > 
</view > 


中外 区 上 区间 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


] 
2 
4 


imagel{ 
width: 220rpx; 
} 


当前 效果 如 图 5-15 所 示 。 


19°C 上 晴 


5-14 区 域 2 预览 效果 5-15 ”区 域 3 预览 效果 


“N/A” 表 示 天 气 状 况 为 “未 知 ”, 待 查询 到 实况 数据 后 将 动态 更 新 图 标 内 容 。 
区 域 4( 多 行 天 气 信息 ) 设 计 

区 域 4 需要 使 用 < view > 组 件 展 示 多 行 天 气 信息 。 
WXML(pages/index/index. wxml) 代 码 片 段 修改 如 下 : 


AIAAODNPp 


2 
2 
二 量 


12. 


情 上 上 pp 
Pe 


a] 
二 


< TVlIew class = 'container'> 


<!-- 区 域 1: 地 区 选择 器 -一 > 
<!- 一 区 域 2: 单行 天 气 信息 -一 > 
<! 一 一 区域 3: 天 气 图 标 --> 


<!-- 区 域 4: 多 行 天 气 信 息 -- > 
< view class= ‘detail'> 
< view class= 'bar'> 
< view class = 'box'> 湿 度 </view> 
< view class = 'box'> 气 压 </view > 
< View class = 'box'> 能 风度 </view> 
</view> 
< View class= 'bar'> 
< view class = 'box'>0 $S</view> 
< view class = 'box'> 0 hPa</view> 


和 


18. < view class= 'box'> 0 km </view > 


19. </view> 

20. < vliew class= 'bar'> 

"上 < View class = 'box'> 风 问 </view > 
z 区 < view class = 'box'> 风 速 </view > 
23. < view class= 'box'> 风 力 </view> 
24. < /view > 

25. < view Class= 'bar'> 

26. < view class = 'box'> 0 </view > 

2 了 7 < view class = 'box'> 0 km/h </view > 
28. < view class = 'box'> 0 级 </view> 
29 . </view > 


30. </view> 
31. </view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


/* 区 域 4 整体 样式 */ 
. detail{ 

width: 100%; 

display: flex; 

flex— direction: column; 
} 19°C 晴 
/x 区域 4 单元 行 样式 */ 
. bar{ 

display: flex; 


0] 


本 


卢 捕 搬 
PPO: 


flex— direction: row; 
margin: 20rpx 0; 

.| 

13. /* 区 域 4 单元 格 样式 */ 
L199 width: 33.3%.; 

text ~ align: center; 


一 


> 
Lm 


17. } 


当前 效果 如 图 5-16 所 示 。 

当前 为 开发 者 自 定 义 数据 , 待 查询 到 实况 数据 后 将 动 
态 更 新 区 域 4 的 内 容 。 此 时 页 面 设 计 就 全 部 完成 了 , 接 下 
来 需要 进行 逻辑 实现 。 


5.5.1 黑 新 省 .市 .区 信息 


首先 修改 < picker > 组 件 中 的 “北京 市 ”为 {region)}) ,然后 为 < picker > 组 件 退 加 日 定义 
bindchange 事件 ,用 于 监听 选项 变化 。 
WXML(pages/index/index. wxml) 代 码 上 请 段 修改 如 下 : 


< VlLew ClLass = Contalner > 
<!- 一 区 域 1: 地 区 选择 器 一 -> 
< picker mode = 'region' bindchange = 'regionChange'> 
<view>{{region}}</view> 
</picker > 
</view> 


Dn 


由 于 地 区 选择 需 的 返回 结果 是 数组 的 形式 ,所 以 在 JS 文件 的 data 中 定义 region 为 包含 
了 省 .市 、 区 3 个 项 目的 数组 , 初 妨 城 市 信息 由 开发 者 日 定义 。 
JS(pages/index/index. js) 代 码 片 段 修改 如 下 : 


1. Pagel{ 

2 / x 

3 * 页 面 的 初始 数据 

4 x/ 

5. data: { 

6 region:[ ' 安 徽 省 ', ' 无 湖 市 ', ' 镜 湖区 '] 
7 1, 

8. /xx 

9. x 更 新 省 .市 .区 信息 

10. 关 1 

11. regionChange: function(e) { 

12. this. setData( {region: e. detail. value} )， 
13， bs 

14. }) 


运行 效果 如 图 5-17 所 示 。 


上 海 市 ,上 海 市 ,黄浦 区 


19°C 晴 


(a) 重新 选择 城市 (b) 更 新 省 、 市 、 区 信息 
图 5-17 更 新 省 .市 ,区 信息 前 后 


由 图 可 见 ,当前 已 经 可 以 目 行 切换 到 国内 任意 省 .市 、 区 。 


5.5.2 区 取 实 况 天 气 数据 


在 JS 文件 中 使 用 目 定 义 困 数 getWeather 进行 实况 天 气 数 据 的 获取 。 由 
于 非 直 辖 市 无 法 查询 到 具体 的 区 ,所 以 后 续 的 天 气 查询 以 城市 作为 查询 依据 。 
JS(pages/index/index. js) 代 码 片 段 修改 如 下 . 


1. Pagel({ 

2 / 

3. * 获取 实况 天 气 数据 

4. x*/ 

5. getWeather: function() { 

6. var that = this; 

了 . wx. request( { 

8. url: 'https://free - api. heweather. com/s6/weather/now', 
9. data: { 

10. location:that. data. region[1], 

11. key: ' 请 填 入 开发 者 申请 的 和 风 天 气 密 钥 ， // 蔡 换 成 开发 者 申请 到 的 key 
上 之。 hs 

13. success:function(res)t{ 

14. console. log(res. data); 

1 } 

16. }) 

17. | 

18. }) 


将 上 述 函 数 在 生命 周期 函数 onLoad 和 自 定义 函数 regionChange 中 分 别 进行 调用 ,表示 
当 页 面 加 载 时 和 切换 城市 时 均 主动 获取 一 次 实况 天 气 数据 。 
JS(pages/index/index. js) 代 码 片 段 修改 如 下 : 


1 
2 
3 
4 
5. 
6 
7 
8 
9 


10. 
11. 
12. 
13. 
14. 
5。 


Pagel { 
x 更 新 省 .市 .区 信息 
关 1 


regionChange: function(e) { 

this. setData( {region: e. detail. value} ); 

this. getWeather( ); // 更 新 天 气 
” 
/ x 

* 生命 周期 图 数 -- 监听 页 面 加 载 

x 
onLoad: function(options) { 

this. getWeather( ); /7 重新 天 气 
ER 

jn 


在 联网 状态 下 保存 后 重新 运行 会 在 Console 控制 台 得 到 第 三 方 服务 需 发 回 的 JSON 数 
据 ,如 图 5-18 所 示 。 


[RR | Console Sources 。 Network Security AppData Audits Sensor Storage Trace Waxml 


© 


| top | Filter Default levels ™ 


v {HeWeather5: Array(1)} 加 


THeWeather6: Array(1) 
Toa: 
bp basic: {cid: "CN101228391"，]location: "芜湖 "，parent _city: “芜湖 "，admin area: "安徽 "，cnty: "中 国 "，..} 
b now: {cloud: "g", cond code: "189", cond txt: "了 睛 "，f1: "16", hum: "25", ..} 
status: "ok™ 
b update: {loc: "2918-19-27 15:46", utc: "2018-19-27 8687:46"} 
b _proto_: Object 
leneth: 1 
hb proto : Array(®) 
b proto :Object 


图 5-18 ”Console 控制 台 获 取 到 服务 器 返回 数据 


由 图 可 见 ,实况 天 气 数 据 包 合 在 HeWeather6|0 |. now 属性 中 。 更 新 getWeather 图 数 ， 
将 该 属性 存 到 JS 文件 的 data 中 ,JS(pages/index/index. js) 代 码 片 段 修改 如 下 . 


b region [3] 


webviewId  : 5é6 


cloud :@ 

cond code : 188 
cond txt : 有 睛 
fl :16 

hum : 25 

Pcpm : .8 
pres : 

tmp : 28 


Vis 3 29 


1. Pagelf{ 

2 / 

3 * 获取 实况 天 气 数据 

4. x/ 中 下 pages/index/index {3} 

全 getWeather: function(t ) { 

6 var that = this; 

7 Wx. request{ { 

8 url: 'https://free— api. heweather. com/s6/ 
weather/now', 

9 . data:1{ 

10. location:that. data. reglion[1|]， 

11. key: 'f0671b6589ff43019e72970d334ea93e" 

12. }, 

13. success:function(res)t{ 

14. that. setData({now: res. data. HeWeather6[0].now]); 

二 } 

16. }) 

17. } ， 

18. }) 


此 时 重新 运行 将 在 AppData 面板 中 查 到 已 经 被 记录 的 
天 气 数 据 , 如 图 5-19 所 示 。 
之 后 只 需要 将 这 些 数据 更 新 到 页 面 上 即 可 显示 出 来 。 


5.5.3 ” 黑 新 页 面 天 气 信息 


将 WXML 页 面 上 所 有 的 临时 数据 部 替换 成 {{now. 属性 )} 的 形式 ,例如 温度 


是 {{now. tmp})}。 
WXML(pages/index/index. Wxml) 代 码 片 段 修改 如 下 : 


1 
2 
3 
4. 
A 
6 
7 
8 


9. 

10. 
11. 
2， 
1 
14d. 
15. 
16. 
17. 
18. 
19. 
20. 
1: 
2 


<Vlew Class = 'container'> 


<!- 一 区 域 1: 地 区 选择 项 -一 > 


<!-- 区域 2: 单行 天 气 信息 --> 
<text>{{now.tmp}}'C {{now.cond txt}}</text> 
<! 一 一 区 域 3: 天 气 图 标 --> 


< image src = '/images/weather icon/{{now.cond code}}.png' mode = 


<!-- 区 域 4: 多 行 天 气 信息 --> 
< Vlew Class = detall > 
< VlLIew class= 'bar'> 
< View class = 'box'> 湿 度 </view> 
< View class = 'box'> 气 压 </view> 
< View class = 'box'> 能 见 度 </view> 
</view> 
<Vlew Class= bar > 
<view class= 'box'>{{now. hum}} %S</view> 
< View class = 'box'>{{now. pres}} hPa </view> 
< View class = 'box'>{ {now. vis}} km </view> 
</view> 
<Vlew Class= bar > 
<View class = 'box'> 风 加 </view> 
< View class = 'box'> 风 速 </view> 


wind deg : 278 


wind dir : 四 风 


wind sc : 3 


wind spd : 16 


图 5-19 AppData 面板 获取 到 数据 


视频 讲解 


'widthFix'></image > 


data 


5 


<vVview class = 'box 

</view> 

<Vlew Class= bar > 
< View class = 'box 
< VLIew class = 'box 
< VlLIew Class = 'box 

</view> 

</view> 
</view> 


运行 效果 如 图 5-20 所 示 。 
需要 注意 的 是 ,在 网 速 受 限 的 情况 下 可 能 不 能 立刻 获取 到 数据 ,因此 最 好 在 JS 文件 的 
中 为 now 规定 初始 数据 ,在 获取 到 实际 数据 前 可 以 临时 显示 这 些 数 据 。 
JS(pages/index/index. js) 代 码 厂 上段 修 改 如 下 : 


Pagel | 
/ xx 
< 页 面 的 初始 数据 
x*x/ 
data: { 
region: [' 安 徽 省 '， 


安徽 省 ,芜湖 市 镜 湖 区 


19°C 晴 


5-20 ”实况 天 气 数据 


> 风力 </view> 


>{{now. wind dir}}</view> 
'>{{now. wind spd}} km/h </view> 
'>{ {now. wind sc}} 级 </view > 


' 无 湖 市 '，' 镜 湖区 ']， 


安徽 省 ,芜湖 市 , 镜 湖 区 


0°C 未 知 


显示 效果 5-21 初始 数据 显示 效果 


此 时 项 目 就 全 部 完成 了 。 


app. json 文件 的 完整 代码 如 下 : 
] . 
之 ， 
3. 
4. 
5. 
6 . 
a 
8. 
9 . 


app. wxss 文件 的 完整 代码 如 下 : 


1 
2 
3 
4. 
5. 
6 
7 
8 


{ 
"pages": | 
"pages/ index/ index" 
] ， 
“Window : { 
"navigationBarBackgroundColor": "#3883FA", 
"navigationBarTitleText": "今日 天 气 " 
} 
} 


/* 育 景 容 冀 样式 x* / 
.Container! 
height: 100vh; /* 高 度 为 100 视窗 ,写成 100% 无 效 */ 
display: flex; /* flex 布局 模型 * / 
flex— direction: column; /xx 垂直 布局 关 / 
align— items: Center; /* 水 平方 回 居 中 / 
Justify— content: space ~ around.; /* 调整 内 容 位 置 * / 
} 


WXML 文件 (pages/index/index. wxm1l) 的 完整 代码 如 下 : 


Io 阅 G 悦 必 Co lo 搬 


请 搬 
上 


<1 一 一 lindex. wxml 一 一 > 
< VlIew class = ContalneTr > 
<!- 一 区域 1: 地 区 选择 毅 --> 
< Dicker mode = 'region' bindchange = 'regionChange'> 
<view>{{region} }</view > 
</picker > 


<! 一 一 区 域 2: 单行 天 气 信息 -~-> 
< text >{ {now. tmp}}'C {{now. cond txt}}</text > 


<!- 一 区域 3: 天 气 图 标 -一 > 


< image src = '/images/weather icon/{{now.cond code}}.png' mode = 'widthFix'></ jimage > 


<!- 一 区域 4: 多 行 天 气 信息 --> 
< VLIeW class= “detall] > 
<Vlew class= bar > 
< View class = 'box'> 湿 度 </view > 
< View class = 'box'> 气 压 </view> 
< View class = 'box'> 能 见 度 </view> 
</ View> 
< VIEW class= “ bar > 
< View class = 'box'>{{now. hum}} 各 </view > 
< View class = 'box'>{ {now. pres}} hPa </view> 
< View class = 'box'>{{now. vis}} km</view> 
</view> 


26 . < VlLIew class = bar > 


了， < View class = 'box'> 风 加 </view> 

28. < View class = 'box'> 风 速 </view> 

29. < View class = 'box'> 风 力 </view> 

20 </ View > 

31 < VlIew class = bar > 

32. < View class = 'box'>{{now. wind dir}}</view> 

33, < View class = 'box'>{{now. wind spd}} km/h</view> 
34. < View class = 'box'>{{now. wind sc}} 级 </view> 

ee </ View > 


36. </Vview> 
37. </view > 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


1. /x* 文 本 样式 */ 

2. textl 

3 font 一 size: 80rpx; 
4. color: # 3C5F81; 

5. |} 
6 

7 

8 

9 


/ * 图 标 样 式 * / 
imagel 
width: 220rpx; 
10. 1} 
11. 


12. /* 区 域 4 整体 样式 */ 
13. .detaill 

14. width: 100%. 

下 display: flex; 


16. flex— direction: column; 
17. | 

18. /x* 区域 4 单 元 行 样式 x*/ 
19. .barl 

20. display: flex; 

21. flex— direction: row; 
22. margin: 20rpx 0; 

23. } 

24. /x* 区 域 4 单元 格 样式 */ 
25. .boxt{ 


26. width: 33.3%.，; 
27. text ~ align: center; 
28. | 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


1. Page({ 

2 / x 

3 * 页 面 的 初始 数据 

4. 关 / 

呈 data: { 

6 region: [' 安 徽 省 '，' 无 湖 市 '，' 镜 湖区 ']， 
7 now: 1{ 

8 tmp:0, 

9. cond txt: ' 未 知 "， 

10. cond code:'999°", 


11. 
1 2， 
13. 
14. 
15. 
16. 
17. 
19. 
19. 
20. 
21. 
Ws 
"二 
24. 
25. 
20. 
a B 
28. 
29. 
30. 
31, 
2 
33. 
34. 
35. 
36. 
37. 
38. 
了 3， 
40. 
41. 
42. 
43. 
44. 
45. 
46. 
47. 
48 . 


}) 


hum:0, 
pres:0, 
vis:0, 
wind dir:0, 
wind_spd:0, 
wind sc:0 
} 
}, 
/ 关 共 
x 更 新 省 .市 .区 信息 
关 
regionChange: function(e) { 
this, setData( {region: e. detail. value} )， 
this. getWeather( ) ; // 更 新 天 气 
}, 
/ ¥¥ 
x 获取 实况 天 气 数据 
x/ 
getWeather: function() { 
var that = this; 
wx. request( { 
url: 'https://free— api. heweather. com/s6/weather/now', 
data: { 
location:that. data. region[1|], 
key: ' 请 填 人 开发 者 申请 的 和 风 天 气 密 钥 ' // 替 换 成 开发 者 申请 到 的 key 
js 
success:function(res)t 
that. setDatal {now: res. data. HeWeather6|[0|.now}).; 


}) 
}, 
/ 尖 基 
< 生命 周期 图 数 -- 监 听 页 面 加 载 
x/ 
onLoad: function(options) { 
this. getWeather( ); // 里 新 天 气 
} 


小 程序 媒体 APl: 口述 校 史 


本 项 目 主 要 内 容 是 使 用 小 程序 媒体 API 制作 一 个 视频 播放 小 程序 ,视频 素材 来 源 为 安徽 
师范 大 学 档案 馆 的 《口述 校 史 ;栏目 , 它 录 制 了 多 名 者 孝 之 年 的 老 教工 回忆 工作 时 期 对 大 学 的 
印象 。 


。 掌握 视频 列表 的 切换 方法 ; 
。 掌握 视频 自 动 播放 方法 ; 


S5 6.1 项 目 他 建 


本 项 目 创建 选择 空白 文件 夹 videoDemo ,效果 如 图 6-1 所 示 。 i 
单 击 “ 新 建 ” 按 钮 完成 项 目 创建 ,然后 准备 手动 修改 页 面 配置 文 件 。 视频 讲解 


代 倍 片 恨 


公 俯 号 网 页 项 目 


公众 号 网 页 


迁 代 ， 了 解 洋 入 
( 】 刁 讯 云 


mm 征 


图 6-1 小 程序 项 目 填写 效果 示意 图 


6.2.1 创建 页 面 文件 


项 目 创 建 完 毕 后 ,在 根 目 录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 一 般 来 说 首页 黑 
认命 名 为 index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 称 可 以 自 定 义 。 本 项 目 只 需要 保 
留 首 页 (index) 即 可 。 

具体 操作 如 下 : 

(1) 将 app. json 文件 内 pages 属性 中 的 “pages/logs/logs "删除 ,并 删除 上 一 行 末 尾 的 
逗号 。 


(2) 按 快捷 键 Ctrl 十 S 保存 当前 修改 。 
6.2.2 删除 和 修改 文件 


具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 月 
动 补 全 加 数 ( 如 图 6-2 所 示 )。 


index .js 者 


fiindex,.js 


Functioen 0 
“Page 
Wm EetCurrentPages 
全 package 
pp pauseBackeroundAudio 
AP previewImage 
PP canvasPutImageData 


6-2 输入 关键 词 创建 Page 函数 


(5) 删除 app. wxss 中 的 全 部 代码 。 
(6) 删除 app.js 中 的 全 部 代码 ,并且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 月 动 
补 全 图 数 (如 图 6-3 所 示 )。 
app.js 二 


function 0h 


6-3 输入 关键 词 创建 App 函数 


0 第 6 章 小 
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6.2.3 创建 其 他 文件 


接 下 来 创建 其 他 自 定义 文件 ,本 项 目 还 需要 一 个 文件 夹 用 于 存放 播放 图 标 。 文 件 夹 名 称 
由 开发 者 自 定义 (例如 images) , 单 击 目录 结构 左上 角 的 十 号 创建 文件 夹 并 命名 为 images。 

本 项 目 用 到 的 图 标 系 材 如 图 6-4 所 示 。 

右 击 目录 结构 中 的 images 文件 来, 选择 “硬盘 打开 ”, 然 后 将 图 标 文 件 复制 .粘贴 进 该 日 
录 。 人 完成 后 的 目录 结构 如 图 6-5 所 示 。 


+ Q 


” [SS images 


四 play.png 
= [SS pages 
v [CS index 
I9 indexjs 
{】 indexjson 
< Index waxml 
wse IMNdex Wass 


9 app.js 


' {} app.jSon 
EP wrss app.WXSS 
(oj projlectconfig json 


图 6-4 图 标 素材 展示 图 6-5 页 面 文件 创建 完成 


此 时 文件 配置 就 全 部 完成 ,6. 3 下 将 正式 进行 页 面 布 局 和 样式 设计 。 


6.3.1 导航 栏 设计 


小 程序 默认 导航 栏 是 黑 底 日 学 的 效果 ,因此 需要 在 app.json 中 目 定 义 导 
航 栏 标题 和 痛 景 颜色 。 更 改 后 的 app. json 文件 代码 如 下 : 


{ 
-pages : |[ 
"pages/ index/ index" 
] ， 
”window : { 
" navigationBarBackgroundColor" : "#987938", 
"navigationBarTitleText": "口述 校 史 " 
} 
} 


上 述 代 码 可 以 更 改 所 有 页 面 的 导航 栏 标 题 文本 为 “ 口 
述 校 史 ” 和 痛 景 颜色 为 金 标 色 ( 间 987938)。 预 宽 效 果 如 
图 6-6 所 示 。 
6.3.2 页 面 设计 

页 面 上 主要 包含 3 个 区 域 , 具 体内 容 解释 如 下 。 


。 区 域 1: 视频 播放 器 ,用 于 播放 指定 的 视频 ; 
。 区 域 2: 弹 幕 发 送 区 域 ,包含 文本 输入 框 和 发 送 按钮 ; 
。 区 域 3: 视频 列表 ,垂直 排列 多 个 视频 标题 ,点 击 不 同 
的 标题 播放 对 应 的 视频 内 容 。 
面板 之 加 需要 有 一 年 的 间 隅 距离 , 届 计 图 如 图 6-7 所 示 。 
计划 使 用 如 下 组 件 。 
。 区域 1, < video > 组 件 ， 
。 区 域 2: < view > 组 件 , 并 定义 class 一 'danmuArea'; ] 
。 区 域 2 内 部 : <input> 和 < button > 组 件 ; 
。 区 域 3. < view > 组 件 , 并 定义 class 二 'videoList'; 
。 区 域 3 内 单元 行 : < view > 组 件 , 并 定义 class 一 "videoBar'; 
。 区 域 3 单元 行内 : 每 行 一 个 < image > 组 件 用 于 显示 播 
放 图 标 .一 个 < text > 组 件 用 于 显示 视频 标题 。 
区 域 1( 视 频 组 件 ) 设 计 
区 域 1 需要 使 用 < video > 组 件 来 实现 一 个 视频 播放 需 。 6-7 页面 设 计 图 
WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 


视频 列表 


1. <!-- 区 域 1: 视频 播放 毅 -一 > 


2. <video id = 'myVideo' controls ></video > 


其 中 controls 属性 用 于 显示 播放 /暂停 .音量 等 控制 组 件 。 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x* 视频 组 件 样式 x*/ 

2. video 1 

3. width: 100 村 ; /* 视频 组 件 宽度 为 100 委 关 / 
4. } 


当前 效果 如 图 6-8 所 示 。 

由 图 可 见 , 此 时 视频 播放 区 域 已 经 出 现在 屏幕 的 顶端 。 

区 域 2( 弹 幕 区 域 ) 设 计 

区 域 2 需要 使 用 < view > 组 件 实现 一 个 单行 区 域 ,包括 文本 输入 框 和 发 送 按钮。 
WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


<!-- 区 域 1: 视频 播放 器 --> 


1 
2 i 

3. <!-- 区 域 2: 弹 幕 控制 -- > 

4. <view Class = 'danmuArea'> 

5 < input type = 'text' placeholder = ' 请 输入 弹 幕 内 容 '></input > 
6 < button > 发 送 弹 幕 </button> 

7 </viewY> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x* 区域 2: 弹 问 控制 样式 */ 
2. /xx*2-1 弹 幕 区 域 样式 */ 
4 display: flex; / x* flex 模型 布局 */ 


5 flex— direction: row; 

6. |]} 

7. /x2 一 2 文本 输入 框 样式 x*/ 

8. input { 

9 border: lrpx solid # 987938; 
10. flex— grow: 1; 


11 height: 100rpx:; 
12. } 

13. /x* 2 一 3 按钮 样式 */ 
14. button 1 


15. color: white; 
16. background— color: #987938; 
17. } 


当前 效果 如 图 6-9 所 示 。 


> 


DOD 


图 6-8 区 域 1 预览 效果 


区 域 3( 视 频 列表 ) 设 计 
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/x* 水 平方 呵 排 列 * / 


/ x* 1rpx 宽 的 实 线 标 色 边框 * / 
/扩张 多 余 空 间 宽度 x*/ 
/¥ 高 度 */ 


/x* 字体 颜色 x / 
/x 背景 颜色 x / 


b> 


0000 


图 6-9 区域 2 预览 效果 


区 域 3 需要 使 用 < view > 组 件 实现 一 个 可 扩展 的 多 行 区 域 ,每 行 包含 一 个 播放 图 标 和 一 个 
视频 标题 文本 。 当 前 先 设 计 第 一 行 效果 ,后 续 使 用 wx:for 属性 循环 添加 全 部 内 容 。 
WXML(pages/index/index. wxml 代 码 片 段 收 改 如 下 : 


<!--- 区 域 1: 视频 播放 器 -一 > 
<!- 一 区 域 2: 弹 幕 控制 --> 
<!-- 区 域 3: 视频 列表 -- > 


< view class = 'videoList'> 
< view class= 'videoBar'> 


ommoewnNr 


< image src = '/ images/play. png'></ image > 


微 信 小 程序 开发 实战 - 微 诛 视频 版 


10. 


< text > 这 是 一 个 测试 标题 </text > 
</viewY> 


11. </view> 


WXSS(pages/index/index. wxss) 代 人 码 片 段 如 下 : 


1. /x 区域 3: 视频 列表 样式 x*/ 
2. /x*3 一 1 视频 列表 区 域 样式 x*/ 
3. .videoList { 

4. width: 100%.; 

5. mln 一 helght: 400rpx; 

6. |} 

7. /x3-2 单 行列 表 区 域 样式 * / 
8. .videoBar 1 

Jy. width: 95%.， 

10. display: flex; 

11. flex— direction: row; 

12. border — bottom: lrpx solid #987938; 
1 3， margin: 10rpx; 

14. }]} 

15. /#3 一 3 播放 图 标 样式 */ 

16. image { 

17. width: 70rpx; 

18. height: 70rpx; 

19. margin: 20rpx; 

20. |] 

21. /#3 一 4 文本 标题 样式 x*/ 

22. text | 

23. font 一 size: 45rpx; 

24. color: 井 987938 ; 

25. margin: 20rpx; 

26. flex— grow: 1; 

27. 】 

当前 效果 如 图 6-10 所 示 。 


请 输入 日 办 内 容 


i 


区 
O00O0 


/x 宽度 x*/ 
/x* 最 小 高 度 */ 


/* 寓 度 */ 

/* flex 模型 布局 */ 

/水 平方 咎 布局 */ 

/* 1rpx 宽 的 实 线 棕色 边框 x* / 
/x* 外 边 距 */ 


/x 
a 
/* 


高 度 */ 


外 边 距 * / 


/* 字体 大 小 */ 

/* 字体 颜色 为 棕色 */ 
/x* 外 边 距 */ 

/* 扩 张 多 余 空 间 宽 度 */ 


这 是 一 个 测试 标题 


图 6-10” 区域 3 预览 效果 


此 时 页 面 设计 就 全 部 完成 了 , 接 下 来 需要 进行 逻辑 实现 。 


6.4.1 更 新 播放 列表 


在 区 域 3 对 < view class 一 'videoBar'> 组 件 添 加 wx:for 属性 ,改写 为 循环 
展示 列表 。 
WXML(pages/index/index. wxml) 代 码 片 段 修改 如 下 : 


<! 一 一 区 域 1: 视 频 播 放 髓 一 -> 
<video id= "myVideo" controls src = "{{src}}"></video> 
<! -- 区 域 2: 弹 幕 控 制 区 域 (代码 略 ) 一 一 > 
<! -- 区 域 3: 视频 列表 -一 > 
<Vlew Class= ‘videoList'> 
< View class = 'videoBar' wx:for = '{{1list}}' wx:key = 'video{{index}}'> 
< image src = '/images/play. png'></ image > 
< 七 ext >{{item.title}}</text > 
</View> 
0. </view> 


然后 在 JS 文件 的 data 属性 中 追加 list 数组 ,用 于 存放 视频 信息 。 
JS(pages/index/index. js) 代 码 片 段 修改 如 下 . 


0 


1. Pagel({ 

2 {xx 

3. x 页 面 的 初始 数据 

4. wj 

5. data: { 

6 . list: [ 

{ 

8. id: '299371', 

9. title: ' 杨 国家 先生 口述 校 史 实录 '， 

10. videoUrl: ' http://arch.ahnu.edu.cn/ local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595 
025F0082_ABD7AE2, mp4?e = .mp4， 

11. }, 

12. { 

13. id: '299396", 

14. title: ' 唐 成 伦 先 生 口 述 校 忠实 录 ', 

15. videoUrl: ' http://arch.ahnu. edu. cn/ _local/E/31/EB/2F368A265E6C842BB6A63EE5EF97_ 
425ABEDD 7167F22.mp4d?e= .mp4d' 

16. bs 

17. { 

18. id: '299378", 

19. title: ' 倪 光明 先生 口述 校 史 实录 '， 

20. videoUrl: ' http://arch. ahnu. edu. cn/ local/9/DC/3B/35687573BA2145023FDAEBAFE67_ 
AAD8D222 925F3FF.mp4?e= .mp4- 

21 . }, 

2 { 

23. id: '299392', 

24. title: ' 吴 兴 仪 先生 口述 校 忠 实录 '"， 

25. videoUrl: ' http://arch. ahnu. edu. cn/ local/5/DA/BD/7A27865731CF2B096E90B522005_ 


A29CB142 6525BCE.mp4?e = .mp4， 
26. } 


微 信 小 程序 开发 实战 - 微 课 视频 版 妃 JO 


图 6-11 更 新 视频 列表 效果 


由 图 可 见 , 当 前 已 经 可 以 展示 全 部 视频 列表 。 
6.4.2 扣 击 播放 倪 频 


在 区 域 3 对 < view _ class 一 'videoBar'> 组 件 添 加 data-url 属性 和 bindtap 
属性 。 其 中 data-url 用 于 记录 每 行 视 频 对 应 的 播放 地 址 ,bindtap 用 于 触发 点 
击 事件 。 

WXML(pages/index/index. wxml) 人 代码 请 段 修 改 如 下 : 


1. <!-- 区域 3: 视频 列表 一 -> 


2. <Vlewclass = 'videoList'> 


了 <Vlew class = 'videoBar' wx:for = '{{1list}}' wx:key = 'video{{index}}' data - url = '{{itenm. 
videoUrl}}' bindtap = 'playVideo'> 

4. < image src = '/images/play. png'></ image > 

5. < text >{{item.title} }</text > 

6b. </View > 

7. </view> 


然后 在 JS 文件 的 onLoad 函数 中 创建 视频 上 下 文 ,用 于 控制 视频 的 播放 和 停止 。 
JS(pages/index/index. js) 代 人 码 厂 段 修改 如 下 : 


1. Pagelt{ 

- / x 

: * 生命 周期 图 数 -- 监听 页 面 加 载 
4 3 

5 


onLoad: function(options) { 


从 第 章 


6. this.videoCtx = wx.createVideoContext( ‘myVideo') 


wr 


程序 媒体 AP1: 口述 校 史 


接着 添加 月 定义 图 数 playVideo,JS(pages/index/index. js) 代 但 搬 段 如 下 : 


1. Pagel({ 

2. /关头 

E * 播放 视频 

4. 关 1 

5. playVideo: function(e) { 

6. // 停 止 之 前 正在 播放 的 视频 
ra this. videoCtx. stop( ) 

8. // 里 新 视频 地 址 

9. this. setDatal { 

10. src: e.currentTarget. dataset. url 
11. | 

12. // 播 放 新 的 视频 

13. this. videoCtx. plav{ ) 

14. }， 

15. }) 


杨 国 宣 先 生 口 述 校 史实 录 杨 国 宜 先生 口述 校 史实 录 
唐 成 伦 先 生 口 述 校 史实 录 唐 成 伦 先 生 口 述 校 史实 录 
倪 光 明 先生 口述 校 史实 录 俐 光明 先生 口述 校 史实 录 


壬 兴 仪 完 生 癌 述 校 史 头 录 ” 吴兴 仪 先生 口述 校 史 实录 


(a) 页 面 初始 效果 (b) 点 击 播放 视频 
图 6-12 点 击 播放 视频 效果 


由 图 可 见 , 当 前 已 经 可 以 成 功 播 放 视频 列表 中 的 视频 。 
6.4.3 发 送 弹 医 


在 区 域 1 对 < video > 组 件 添加 enable-danmu 和 danmu-btn 属性 ,用 于 允 
许 发 送 弹 莫 和 显示 "发 送 弹 幕 ”按钮 。 


WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


1. <!-- 区域 1: 视频 播放 响 -一 > 
2. <video id = 'myVideo' src= '{{src}}' controls enable - danmu danmu - btn ></video> 
然后 在 区 域 2 为 文本 输入 框 追 加 bindinput 属性 ,用 于 获取 弹 幕 文本 内 容 ; 为 按钮 追加 
bindtap 属性 ,用 于 触发 点 击 事件 。 
WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 
1. <! 一 区 域 2: 弹 幕 控制 --> 
2 <Vlew Class = 'danmuArea'> 
3. < input type = 'text' placeholder = ' 请 输入 弹 幕 内 容 'bindinput = 'getDanmu'></input > 
4 
2 


< button bindtap = 'sendDanmu'> 发 详 弹 幕 </button > 
</view> 


对 应 的 JSCpages/index/index. js) 代 码 片 段 修改 如 下 : 


1. Pagel({ 

2. / xx 

3. * 页 面 的 初始 数据 

4. x*x/ 

hs data: { 

6. danmuTxt: '', 

7. list: [| … | 

8. } 

9. / x 

10. * 更 新 弹 幕 内 容 

11. x 

12. getDanmu: function(e) { 

13. this. setDatal { 

14. danmuTxt: e. detail. value 
15. }) 

16. }, 

17. /*¥ 

18. * 发 送 弹 幕 

19. x*/ 

20. sendDanmu: function(e) { 

21. let text = this. data. danmuTxt.; 
22. this. videoCtx. sendDanmul { 
23. text :text, 

24. color: 'red' 

25. }) 

26. 1 

27. }) 


此 时 可 以 发 出 红色 文本 的 弹 幕 ,运行 效果 如 图 6-13 所 示 。 
如 果 和 希望 发 出 随机 颜色 的 弹 幕 内 容 , 可 以 在 JS 文件 中 追加 自 定义 函数 getRandomColor。 
JS(pages/index/index. js) 代 码 片 段 如 下 ， 


1. // 生 成 随机 颜色 

2 function getRandomColor() { 

3 let rgb = [| 

4. for (let i = 0; i<3; ++i) 1 

5 let color = Math.floor(Math.random() < 256).toString(16) 
6 color = color.length == 1? "0' + color : color 


7. rgb. push( color) 

8. } 

9. return '#' + rgb. join("'') 
10. | 


上 述 代 人 码 可 以 随机 生成 一 个 十 六 进 制 的 颜色 ,将 其 在 原先 需要 录入 color 属性 的 地 方 调 
用 即 可 实现 彩色 强 禹 效果 。JS(pages/index/index.js) 代 人 码 片 段 修 改 如 下 : 


1. Page({ 

和 / x 

* 发 送 弹 幕 

4. x / 

5. sendDanmu: function(e) { 

6. let text = this. data. danmuTxt:; 
7. this. videoCtx. sencdDanmu( { 
8. text :text, 

9 . color: getRandomColort ) 
10. } 

11. bs 

12. }) 


此 时 可 以 发 出 彩色 文本 的 弹头, 运行 效果 如 图 6-14 所 示 。 


发 送 弹 幕 iha 发 送 弹 幕 


杨 国 宜 先 生 口 述 校 史实 录 杨 国 宜 先生 口述 校 史 实录 


唐 成 伦 先 生 口述 校 史 买 录 办 唐 成 伦 先生 口述 校 史 实录 


吴兴 仪 先生 口述 校 史实 录 吴兴 仪 先生 口述 校 史实 录 


图 6-13 ”发 送 红 色 弹 幕 效 果 图 6-14 发送 彩色 弹 幕 效果 
至 此 相关 的 逻辑 功能 均 已 实现 ,项 目 全 部 完成 。 


565 完整 代码 民 


app. json 文件 的 完整 代码 如 下 : 


1， 1 


-pages : | 
"pages/ index/ index" 

]， 

“wincow : { 
"navigationBarBackgroundColor": "#987938", 
"navigationBarTitleText": "口述 校 史 " 

} 

} 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


中 Gww 


<!I—— Index. wxml| 一 一 > 

<!- 一 区 域 1: 视频 播放 般 -一 > 

< Video id= 'myVideo' src = '{{src}}' controls enable - danmu danmu - btn ></video > 

<!-- 区 域 2: 弹 幕 控制 --> 

< VlIew class= danmuATrea > 
< input type = 'text' placeholder = ' 请 输入 弹 幕 内 容 ' bindinput = 'getDanmu'></input > 
< button bindtap = 'sendDanmu'> 发 送 弹 幕 </button > 

</view> 

<!- 一 区 域 3: 视频 列表 -- > 

10. < VlIew class = VldeoL1lst > 

11. < View class = 'videoBar' wx:for = '{{list}}' wx:key = 'video{{ index}}' data ~— url = '{{itenm. 

videoUrl}}' bindtap = 'playVideo'> 

12. < image src = '/images/play. png'></image > 

13. < text >{{item. title} }</text > 

14. </ View> 

15. </view > 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


Dm Np 


1. /* 区域 1: 视频 组 件 样 式 */ 

2. video { 

和 width: 100 %; /* 视频 组 件 宽度 为 100% x*/ 
4. |} 

5. 

6. /x 区 域 2: 弹 幕 控制 样式 *V/ 

7 /x*2-1 弹 幕 区 域 样式 x*/ 

9 . display: flex; /x* flex 模型 布局 * / 

10. flex— direction: row; /* 水 平方 品 排 列 */ 

11. } 

12. /<*2-2 文 本 输入 框 样式 *V/ 

13. input { 

14. border: lrpx solid #987938; /x* 1rpx 客 的 实 线 标 色 边框 x / 
15. flex— grow: 1; /x* 扩张 多 余 空间 宽度 x*/ 
16. height: 100rpx; /* 噩 度 x*/ 

17. |} 

18. /* 2 一 3 按钮 样式 */ 

19. button { 

20, color: White ; /i 字体 颜色 * / 

21. background— color: #987938; /x* 背景 糊 色 x* / 

22. |} 

" 


24. /x* 区域 3: 视频 列表 样式 */ 
25，/x 3 - 1 视频 列表 区 域 样 式 * / 
26. .VideoList { 


二 了 。 
28. 
29. 
30. 
Ss 
:Fr 
33. 
34. 
35. 
36. 
了 了 
38. 
39. 
40. 
41. 
42. 
43. 
44. 
45. 
46 . 
47. 
48 . 
49 . 
50. 


JSCpages/index/index. js) 的 完整 代 人 码 如 下 : 


mJ 人 WD 


Pp 
DD 


有 加 


22. 
23. 
24. 
25. 
26 . 


width: 100 竺 ; 


/x 宽度 x*/ 


min— height: A400rpx; /x* 最 小 高 度 */ 

} 

/x* 3 一 2 单行 列表 区 域 样 式 * / 

. VideoBar { 
width: 95%; /* 宽度 x*/ 
display: flex; /x* flex 模型 布局 * / 
flex— direction: row; /x* 水 平方 品 布 局 */ 
border - bottom: 1rpx solid #987938; /x* 1rpx 宽 的 实 线 棕色 边框 x / 
margin: 10rpx; /x 外边 距 * / 

} 

/x* 3 一 3 播放 图 标 样 式 */ 

image 1 
width: 70rpx; /x* 宽度 x*/ 
height: 70rpx; /¥* 高 度 x*/ 
margin: 20rpx; /x* 外边 距 */ 

} 

/*3 一 4 文本 标题 样式 */ 

text { 
font 一 size: 45rpx; /x* 字体 大 小 */ 
color: 间 987938; /* 字体 匣 色 为 标 色 * / 
margin: 20rpx; /x 外边 距 * / 
flex— grow: 1; /* 扩张 多 余 空间 宽度 */ 


} 


// 生 成 随机 颜色 

function getRandomColor() { 
let rgb = [] 
for (let i = 0; i<3; ++1i) { 


let color = Math.floor(Math.random() * 256).toString(16) 


1d: 299371 ， 


title: ' 杨 国 宜 先 生 口 述 校 史 实录 '， 


color = _ color. length == 1 ? '0' + color : color 
rgb. push( color) 

} 

return '#' + rgb. join{('') 

} 
. Pagel({ 

/ 关 关 
* 页 面 的 初始 数据 
x 

data: { 
danmuTxt: '', 
list: [{ 


videoUrl: ' http://arch.ahnu.edu.cn/ local/6/CB/D1/C2DF3FC847FA4CE2ABB67034C595_ 
025F0082 ABD7TAE2. mp4?e= .mp4' 


}, 
{ 
1d: '299396°', 


title: ' 唐 成 伦 先 生 口 述 校 中 实录"， 
videoUrl: ' http://arch. ahnu.edu. cn/ local/E/31/EB/2F368A265E6C842BB6A63EE5F97_ 


425ABEDD 7167F22.mp4?e = .mp4' 


-A 


}, 


29. id: '299378", 

JU title: ' 倪 光明 先生 口述 校 史 实录 ', 
31. videoUrl: ' http://arch.ahnu.edu.cn/ local/9/DC/3B/35687573BA2145023FDAEBAFE67_ 
AAD8D222 925F3FF. mp4?e= .mp4' 

32. 上 

本 { 

34. id: '299392", 

e title: ' 吴 兴 仪 先生 口述 校 忠 实录", 
36. videoUrl: ' http://arch.ahnu.edu.cn/ local/5/DA/BD/7A27865731CF2BO96E90B522005_ 
A29CB142 6525BCF. mp4d?e= .mp4' 

37. } 

38. ] 

39. bs 

40. /x 

41. * 更 新 弹 幕 内 容 

42. x 

43. getDanmu: function(e) { 

44. this. setDatal { 

45. danmuTxt: e. detail. value 

46. }) 

47. 1 

48. /x 

49. * 发 送 弹 幕 

50. 关 / 

5 sendDanmu: function(e) { 

Fr let text = this. data. danmuTxt; 

53. this. videoCtx. sendDanmu( { 

54. text :text, 

55. color: getRandomColor( ) 

56. }) 

21. 1s 

58. /xx 

59. x 播放 视频 

60. x*/ 


61. playVideo: function(e) { 
62. // 停 止 之 前 正在 播放 的 视频 


63. this. videoCtx. stop() 

64. // 更 新 视频 地 址 

65. this. setDatal { 

66. src: e.currentTarget. dataset. url 
67. }) 

68. // 播 放 新 的 视频 

69. this. videoCtx. play( ) 

70.  )}, 

了 71， /3 

72. < 生命 周期 函数 一- 监听 页 面 加 载 
本 x*x/ 

74. onLoad: function(options) { 

75. this.videoCtx = wx.createVideoContext( 'myVideo') 
76. } 


77. 月 


小 程序 文件 API . 电子 书 橱 


本 章 主 要 介绍 小 程序 文件 API 的 用 法 ,包括 文件 的 保存 、 信 息 的 获取 .本 地 文件 列表 的 获 
取 、 本 地 文件 信息 的 获取 、 删 除 本 地 文件 和 打开 指定 文档 。 


曹 学习 目标 


掌握 保存 临时 文件 的 方法 ; 
掌握 获取 本 地 文件 列表 的 方法 ; 
掌握 获取 本 地 文件 信息 的 方法 ; 
掌握 删除 本 地 文件 的 方法 ; 
掌握 打开 指定 文档 的 方法 。 


本 项 目 需要 将 奋 干 个 PDF 格式 的 电子 书 存放 在 服务 喘 端 的 books 文件 
夹 中 。 由 于 图 书 版 权 问题 ,开发 者 可 以 目 行 准备 一 些 电 子 书 进行 使 用 。 
请 根据 “附录 A 服务 需 部 署 ? 中 的 内 容 进 行 服务 融 的 搭建 和 部 署 工 作 。 


本 项 目 创建 选择 空白 文件 夹 bookDemo ,效果 如 图 7-1 所 示 。 he: 
单 击 “新 建 ? 按 钮 完成 项 目 创建 ,然后 准备 手动 创建 页 面 配 置 文件 。 视频 讲解 


same 


bookDemo 
EWxdemo_ workspace\lbookDemo 


wx19079110a0i01e8a 


著 无 ApplD 可 注册 


建 服务 器 ， 使 用 平台 提供 的 API 进行 核心 业务 开发 ， 可 实现 小 程序 快速 上 法 和 
迁 代 。 了 解 详 情 


“腾讯 去 


JavaScript 


图 7-1 小 程序 项 目 填 写 效 果 示 意图 


7.3.1 创建 页 面 文件 


项 目 创建 完毕 后 ,在 根 目 录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 
一 般 来 说 首页 默认 命名 为 index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 
称 可 以 目 定义 。 本 项 目 只 需要 保留 自 页 (index) 即 可 。 


具体 操作 如 下 : 
(1) 将 app. json 文件 内 pages 属性 中 的 “pages/logs/logs” 删 除 , 并 删 际 上 一 行 末 尾 的 
二 


(2) 按 快捷 键 Ctrl 十 S 保存 当前 修改 。 


7.3.2 期 除 和 修改 文件 


具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 自 
动 补 全 困 数 (如 图 7-2 所 示 )。 

(5) 删除 app. wxss 中 的 全 部 代码 。 


各 DO 第 7 章 小 程 有 


iIndex.js 者 
1 /iindex.js 
过 page 


tunction 和 


® EetCurrentPages 

2 package 

PP pauseBackgroundAudio 
AP previewImage 

A canvasPutImageData 


7-2 输入 关键 词 创 建 Page 函数 


(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 
补 全 函数 (如 图 7-3 所 示 )。 


app.js 种 
rfapp.]js 
| hm 


furnction 人 


9 getApp 


图 7-3 输入 关键 词 创建 App 函数 


本 项 目的 文件 配置 就 全 部 完成 ,7.4 节 将 正式 进行 页 面 布 局 和 样式 设计 。 


7.4.1 导航 栏 该 计 


小 程序 本 默认 导航 栏 是 黑 底 日 学 的 效果 ， 因此 需要 在 + apb. json 中 有 目 定 义 时 
航 术 标题 和 育 景 颜色 。 更 改 后 的 app.json 文件 代码 如 下 : 


pages : | 
"pages/ index/ index" 

]， 

“Window : { 
"navigationBarBackgroundColor": "并 663366"， 
"navigationBarTitleText": "我 的 书 橱 " 

} 

} 


(已 Co 站 on tn 必 Lo lo 上 哺 


上 述 代 码 可 以 更 改 所 有 页 面 的 导航 栏 标题 文本 为 “我 的 书 橱 ”背景 颜色 为 紫色 
(上 井 663366) 。 预 览 效 果 如 网 7-4 所 示 。 


二 at = 


图 7-4 ” 自 定义 导航 栏 效果 


7.4.2 页 面 设计 

页 面 上 主要 以 九宫 格 的 形式 展示 图 书 封面 和 标题 ,设计 图 如 图 7-5 所 示 。 

计划 使 用 如 下 组 件 。 

。 页 面 整 体 , < view > 组 件 , 并 和 定义 class 一 'container '; 

。 图 书 单元 区 域 : 多 个 < view > 组 件 , 并 定义 class 一 'box'; 

。 图 书 单 元 区 域内 部 : 一 个 < Image > 组 件 用 于 显示 图 书 封 面 ,一 个 < text > 组 件 用 于 显示 

图 书 标题 ,垂直 居中 排列 。 

用 户 第 一 次 点 击 图 书 时 需要 从 服务 器 下 载 对 应 的 文件 ,为 了 达到 更 好 的 用 户 体 验 , 此 时 将 

隐藏 图 书展 示 容 兹 内 容 并 显示 下 载 家 层 , 设 计 图 如 图 7-6 所 示 。 


下 载 中 ， 请 稍 候 


7-5 ”页 面 设计 图 1 图 7-6 页面 设计 图 2 
计划 使 用 如 下 组 件 。 


。 页 面 整体 : < view > 组 件 , 并 定义 class 二 'loading-container'; 
e 标题 :所 text > 组 件 ; 
。 进度 条 : < progress > 组 件 。 
图 书展 示 容 器 设计 
首先 定义 页 面容 器 (< view >),WXML(pages/index/index. wxml) 人 代码 片段 如 下 : 


1， <view class= “ book 一 Contalner > 
2. </view> 


WXSS(pages/index/index. wxss) 人 代码 片段 如 下 : 


1. /Vx* 图 书展 示 容 策 样 式 </ 

2 .book — contaliner{ 

3 displav: flex; / * flex 模型 布局 * / 
4. flex— direction: row; /¥ 水 平 排列 ¥* / 

5 flex— wrap: wrap; /¥ 人 允许 换行 * / 

6.  } 


当前 效果 如 图 7-7 所 示 。 

由 于 还 没有 添加 组 件 元 系 , 所 以 疝 看 不 出 来 flex 布局 模型 效果 。 

图 书 单 元 区 域 设 计 

图 书 单元 区 域 需 要 使 用 < view > 组 件 实现 一 个 可 扩展 的 近似 九宫 格 区 域 ,每 格 中 包含 一 个 
图 书 封 面 和 一 个 图 书 标 题 文 本 。 当 前 先 设 计 第 一 格 单元 区 域 效 果 , 后 续 使 用 wx:for 属性 循环 
添加 全 部 内 容 。 

WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


RE 


<Vlew Class = “book 一 container > 
< view class = 'box'> 
< image src= 'https:// img3. doubanio. com/view/ subject/1/public/ s27243455. jpg'></ image > 
< text > Java 编程 思想 </text > 
</view> 
</ View> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


iD 


上 哺 
上 全 


12. 


.} 


/* 图 书 单元 区 域 样 式 * / 
. box{ 
width: 50%; /* 宽度 */ 
height: 400rpx; /x* 高 度 x*/ 
display: flex; / * flex 模型 布局 关 1 
flex— direction: column; /< 垂直 排列 *V 
align 一 Items: center; /x* 水 平方 同居 中 x* / 
Justify— content: space ~ around ; /* 分 项 布 局 */ 
} 
. /* 图 书 封面 图 片 样式 * / 
. imagel 
width: 200rpx; /x* 宽度 </ 
height: 300TrPX， /x* 高度 x*/ 
. /x* 图 书 标题 文本 样式 * / 
. text{ 
text ~ align: center; /* 文本 居中 显示 */ 


.| 


当前 效果 如 图 7-8 所 示 。 

图 书 下 载 葵 层 设计 

由 于 图 书 下 载 时 的 蒙 层 与 图 书展 示 页 面 不 能 同时 出 现 , 所 以 使 用 wx:if 属性 进行 切 分 。 
WXML(pages/index/index. wxml) 代 码 片 段 修改 如 下 : 


1 
2 
< 全 
4 


<!-- 下 载 时 的 蒙 层 -~- > 
< view class = 'loading - container' wx: if = '{{isDownloading}}'> 
< text > 下 载 中 ,请 稍 候 </text > 
< progress percent = " {{percentNum}}" stroke - width = "6” activeColor = " # 663366" 


backgroundColor = " # FFFFFF" show- info active active - mode = "forwards"></progress > 


DD - 呈 Ln 
二 


Le 


</view> 


<! 一 一 图 书展 示 容 器 -一 > 
<Vvliew Class = 'book — container' wx:else> 
<!-- 内 容 略 --> 


，</view > 
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图 7-7 ”页面 预览 效果 图 7-8 图 书 单 元 区 域 预览 效果 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x 下载 时 的 壹 层 容 笑 样 式 * / 

2. .loading— container { 

3. height: 100vh; /* 高 度 */ 

4. background - color: silver; /* 背景 糊 色 */ 

- display: flex; / x* flex 模型 布局 */ 
6. flex— direction: column; /*# 水 平 排 列 * / 

7. align— items: center; /x* 水 平方 同居 中 * 1 
3. Justify— content: Space 一 around ; / < 分 艇 布局 关 / 

9. 】} 

10. 


11. /* 进度 条 样式 */ 

12. progresst{ 

13. width: 80%.; /#* 宽 度 </ 
14. } 


JS(pages/index/index. js) 代 码 厂 上段 修改 如 下 : 


Pagel { 

/ x 

* 页 面 的 初始 数据 
x/ 

data: 1 
isDownloading: false, 
percentNum: 0 

} 


iD 中 
于 


1 ) 
开发 者 可 以 临时 设置 isDownLoading 的 值 为 true, 并 且 为 percentNum 设置 一 个 0 一 100 
的 数值 ,这样 就 可 以 提前 预 唤 进度 条 动画 效果 。 当 前 效果 如 图 7-9 所 示 。 


图 7-9 下 载 蒙 层 页 面 预 览 效 果 


测试 完毕 后 ,记得 还 原 isDownloading 和 percentNum 的 值 为 初始 值 。 
此 时 页 面 设 计 就 全 部 完成 了 , 接 下 来 需要 进行 逻辑 实现 。 


7.5.1 更 新 疼 书 列表 


在 图 书 单元 区 域 对 < view class= 王 'box'"> 组 件 添 加 wx:for 属性 ,改写 为 循 


环 展 示 列 表 。 
WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


< VlIew Class = 'book ~— container' wx:else> 
< View Class = 'box' wx:for= '{{bookList}}'wx:key= 'book{{index}}'> 
< image src = '{{item. poster} } '></image > 
< text >{{item.title}}</text > 
</view> 
</view> 


JSCpages/index/index. js) 代 码 片 段 修改 如 下 : 


1 
2 
3 
4 
hs 
6 
7 
8 


Pagel { 
/ 
* 页 面 的 初始 数据 
x/ 
data: { 
ilsDownloading: false, 
percentNum: 0, 
bookList:[ 
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9 { 

10. id: 001 ， 

11. title: 'Java 编程 思想 '， 

12. poster: 'https://img3. doubanio. com/view/subject/1/public/s27243455. jpg', 
13. fileUrl: 'http://localhost/books/book001. pdf' 

14. 和 

15. 

16. id: 002 ， 

1 title: “计算 机 科学 概论 '， 

18. poster: 'https://img3. doubanio. com/view/subject/1/public/s6069865. jpg', 
19. fileUr1: 'http://localhost/books/book002. pdf' 

20. 1 

21. 

22. id: 003 ， 

23. title: ' 安 徒 生 童话 '， 

24. poster: 'https://img3. doubanio. com/view/subject/1/public/s28036746. jpg', 
2 fileUrl: 'http://localhost/books/book003. pdf' 

26. }, 

27. 

28. id: 004 ， 

29 . title: “三 体 (I) '， 

30. poster: 'https://imgl. doubanio. com/view/subject/1/public/s2768378. jpg', 
3 fileUr1: 'http://localhost/books/book004. pdf， 

32. }, { 

3 id: “005 ， 

34. title: ' 三 体 (II)', 

99 poster: 'https://img3.doubanio. com/view/subject/1/public/s3078482. jpg', 
36. fileUrl: 'http://localhost/books/book005. pdf' 

37. js 

38. 

39. id: 006 ， 

40. title: “三 体 (III) '， 

41. poster: 'https://img3.doubanio. com/view/subject/1/public/s26012674. jpg', 
42. fileUrl: 'http://localhost/books/book006. pdf' 

43. } 

44. ] 

45. ), 

46. }) 


其 中 封面 图 片 桑 材 来 日 豆 注 读书 频道 (https://book. douban. 
com/) ,文件 下 载 为 本 地 模拟 服务 兹 效果 (http://localhost/ 
books/bookXXX. pdf) ,开发 者 可 以 目 行 更 改 存放 网 书 的 路 径 Java 握 程 思想 计算 机 科 子 全 论 


| 


地 址 和 电子 书 名 称 。 

运行 效果 如 图 7-10 所 示 。 

由 图 可 见 , 当前 已 经 可 以 展示 全 部 图 书 
列表 。 


7.5.2 封 半 提示 消 忧 


由 于 多 处 会 使 用 提示 消息 模 态 框 ,所 以 在 。 下 
JS 文件 中 对 其 进行 封装 ,以 方便 后 续 使 用 。 

在 JS 文件 中 浴 加 有 目 定 义 图 数 showTips,JSCpages/index/ 图 7-10 重新 图 书 列表 效果 
index. js) 代 码 厂 段 如 下 : 


1. Page({ 

2. / 兴 兴 

了 x 封装 showModal 方法 
4. x*x/ 

5 . showTips: function(content) { 
6. wx. ShowModal({ 

1 title: :提醒 '， 

8 . content: Content ， 
9 . showCancel: false 
10. }) 

11. } 

12. 月 


这 样 在 其 他 函数 中 只 需要 调用 this. showTips(' 自 定义 的 提示 信息 就 可 以 方便 地 实现 


模仿 框 扣 示 效 末了。 


7.5.3 打开 指定 图 书 


保存 ,然后 才能 打开 。 因 此 在 这 两 种 不 同 的 情况 判断 中 ,最 后 都 需要 实现 打开 


当 用 户 点 击 图 书 时 ,如 果 已 经 下 载 过 ,可 以 直接 打开 ,否则 需要 进行 下 载 、 


指定 图 书 的 功能 。 为 了 避免 代码 重复 ,这 里 对 该 功能 进行 封 次 。 


开 图 书 的 效果 了 。 
7.5.4 保存 下 载 的 图 书 


件 的 保存 。 


在 JS 文件 中 添加 自 定义 函数 openBook,JSCpages/index/index. js) 代 码 片 段 如 下 : 


1. Pagel({ 

2 / x 

3 x 打开 图 书 

4 关 1 

5 . openBook: function(path) { 

6 Wx. openDocument ( { 

7 filePath: path, 

8. success: function(res) { 
9 . console. 1og( ' 打 开 图 书 成 功 ') 
10. }, 

11. fail: function(error) { 
12. console. log(error); 
13. } 

14. }) 

15., } 

16. }) 


这 样 在 其 他 函数 中 只 需要 调用 this. openBook(' 指 定 的 图 书 地 址 ') 就 可 以 方便 地 实现 打 


这 里 对 保存 图 书 功能 进行 封装 , 当 图 书 下 载 完 毕 后 根据 临时 地 址 进行 


在 JS 文件 中 添加 自 定义 函数 saveBook ,JSCpages/index/index. js) 代 人 码 厂 段 如 下 : 
1. Pagelf 
2 


3 * 保存 图 书 


*/ 


4 

5. saveBook: function(id, path) { 
6. var that = this 

7 wx. saveF ilel(l { 

8 tempFilePath: path, 

9 success: function(res) { 


10. // 将 文件 地 址 保存 到 本 地 缓存 中 ,下 次 直接 打开 
11. let newPath = res. savedFilePath 
12. wx. SetStorageSync( id, newPath) 
13. // 打 开 图 书 

144. that. openBook (newPath) 

15. 上 

165. fail: function(error) { 

17. console. log(error) 

18. that. showTips( ' 女 件 保 存 失 败 ! 7) 
19. } 

20. }) 

21. }, 

22. }) 


这 样 在 其 他 函数 中 内需 要 调用 this. saveBook(' 下 载 后 的 临时 地 址 就 可 以 方便 地 实现 保 


存 并 打开 图 书 的 效果 了 。 需 要 注意 的 是 ,应 尽量 避免 在 wx. 开头 的 API 内 部 使 用 this 关键 
词 , 因 此 需要 再 明 var that 二 this 来 进行 方法 的 调用 ， 


7.5.5 下 载 开 阅读 图 书 


首先 修改 图 书 单 元 区 域 ,为 其 添加 bindtap 事件 ,触发 月 定义 图 数 readBook。 
WXML(pages/index/index. Wxml) 代 码 片 段 修改 如 下 : 


1. <!--- 图 书展 示 容 毅 -一 > 

2. <Vlewclass = 'book— Contalner wx:else> 

二 <! 一 一 图书 单元 区 域 -一 > 

4. < View Class = 'box' wx:for= '{{bookList}}' wx:key = 'book{{index}}' data ~ file = '{{itenm. 
fileUrl}}' data— id= '{{item. id}}' bindtap = 'readBook'> 

5. <!-- 内 容 略 -一 > 

6. </view > 

7. </view> 


然后 在 JS 文件 中 添加 自 和 定义 图 数 readBook,JS(pages/index/index. js) 代 码 片 段 如 下 : 


1. Pagel{ 

2. / x 

: *x 阅读 图 书 

4. 关子 

SS readBook: function(e) { 

6 . Var 七 hat = this 

7. // 获 取 当 前 点 击 图 书 的 巧 

8. let 1d = e.currentTarget. dataset. 1d 
9. // 获 取 当 前 点 击 图 书 的 URL 地 址 

10. let fileUrl = e.currentTarget. dataset. file 
11. // 查 看 本 地 缓存 

12. let path = wx.getStorageSvync(id) 
13. // 未 曾 下 载 过 

14. if (path == ') 1{ 

15. // 切换 到 下 载 时 的 花 层 


60. 
61. 
62. 


that. setDatal { 
lsDownloading: true 
}) 
// 先 下 载 图 书 
const downloadTask = wx. downloadFilel({ 
url: fileUrl， 
success: function(res) { 
// 关 团 下 载 时 的 去 层 
that. setDatal { 
lsDownloading: false 
}) 
// 下 载 成 功 
if (res. statusCode == 200) 1 
// 获取 地 址 
path = res. tempFilePath 
// 保 存 并 打开 图 书 
that. saveBook( id, path) 


} 
// 连 上 了 服务 硕 , 下 载 失败 
else |{ 
that. showTips( ' 暂 时 无 法 下 载 ! ') 
} 
}, 
// 请 求 失败 
fail: function(e) { 
// 关 闭 下载 时 的 蒙 层 
that. setDatal { 
isDownloading: false 
}) 
that. showTips( ' 无 法 连接 到 服务 胡 ! ') 
} 
}) 
// 监 听 当 前 文件 的 下 载 进 度 
downloadTask. onProgressUpdate(function(res) { 
let progress = res. progress; 
that. setDatal { 
percentNum: progress 
}) 
}) 
} 
// 之 前 下 载 过 的 ,直接 打开 
else | 
// 打 开 图 书 
that. openBook( path) 
} 


运行 效果 如 图 7-11 所 示 。 


其 中 图 7-11(a) 是 首次 点 击 下 载 图 书 的 页 面 ,进度 条 会 不 断 更 新 ; 图 7-11(b) 是 下 载 地 
址 有 误 时 的 提示 信息 ,此 时 无 法 下 载 资源 文件 ; 图 7-11(c) 是 已 经 下 载 成 功 但 文件 保存 失败 
时 的 提示 信息 ,需要 注意 本 地 文件 最 大 限制 为 10MB; 图 7-11(d) 是 服务 器 无 法 啊 应 时 的 提 
示 信 息 ,需要 检查 服务 关 地 址 是 否 正确 ,以 及 服务 天 是 否 开启; 图 7-11(e) 是 成 功 下 载 ,保存 


并 打开 电子 图 书 的 页 面 。 
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(a) 正在 下 载 图 书 (b) 特殊 情况 : 下 载 地 址 有 误 


本 二 而 二 看 Chat 二 -0 95 a 各 要 十 硬 二 hai 


(c) 特殊 情况 : 文件 过 大 保存 失败 (d) 特殊 情况: 服务 器 无 啊 应 
图 7-11 点 击 图 书 效 果 


文件 AP1 电子 书 柚 和 [4 


上 本 尔 E 
EDn 外 


Bruce Eckel 鞭 陈 吴 驳 
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(e) 下 载 成 功 并 打开 
图 7-11 ( 续 ) 
需要 注意 的 是 ,localhost 并 非 真 正 的 服务 带 地 址 ,因此 仅 可 在 web 开发 者 工具 中 模拟 
使 用 。 开 发 着 可 以 后 期 将 文件 上 传 到 服务 关上 ,修改 文件 下 载 URL 地 址 ,再 进行 真 机 


a 


app. json 文件 的 完整 代码 如 下 : 


{ 
pages : | 
"pages/ index/ index" 
] ， 
Window : { 
"navigationBarBackgroundColor": "并 663366", 
"navigationBarTitleText": "我 的 书 橱 " 
} 
} 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


iD 虱 鲍 9 捕 


<!-- 下 载 时 的 蒙 层 --> 
<Vliew class = ']Joading ~ container' wx:if = '{{isDownloading}}'> 
<text > 下 载 中 ,请 稍 候 </text > 
< progress percent = " {{percentNum}}" stroke — width = "6" activeColor =" # 663366" 
backgroundColor = "#3FFFFFF" show— info active active— mode = "forwards"></progress > 
</view> 


局 Lo 搬 


<:-- 图 书展 示 容器 -> 
<Vview class = 'book— container' wx:else> 
<! 一 一 图 书 单元 区 域 --> 
10. <View Class = 'box' wx:for = '{{bookList}}' wx:key = 'book{{index}}' data -— file = '{{itenm. 


iD Dn 


fileUrl}}' data~— id= '{{item. id}}'" bindtap = 'readBook'> 
<! 一 一 图 书 封 面 -一 > 
< image src = '{{item. poster}}'></image > 
<!-- 图 书 标 题 文 本 -一 > 
< text >{{item.title} }</text > 
</view> 
</view> 


16.; 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


] 
2 
3 
4. 
6 
7 
8 
9 


10. 
11. 
Ds 
13. 
14. 
15:; 
16. 
17., 
18. 
19. 
20. 
上 可 
2 
23. 
24. 
2 
26 . 
27. 
28. 
29. 
30. 
31. 
CP 
党 
34. 


/* 下载 时 的 壹 层 容 徊 样式 * / 
. loading — container { 
height: 100vh; 
background ~ color: silver,; 
display: flex; 
flex— direction: column; 
align ~ items: center; 
Justify— content: space 一 around; 


} 


/* 进度 条 样式 */ 
Progress{ 

width: 80%. 
} 


/ * 图 书展 示 容 络 样 式 x* / 
,book — container { 
display: flex; 
flex— direction: row; 
flex— wrap: wrap; 


} 


/ x* 图 书 单 元 区 域 样式 * / 
width: 50 和 村 ; 
height: 400rpx; 
display: flex; 
flex— direction: column; 
align ~ items: center; 
Justify— content: Space ~ around; 


} 


/ * 图 书 封面 图 片 样式 */ 
image { 
width: 200rpx:; 
height: 300rpx; 


.| 


. /* 图 书 标题 文本 样式 */ 
. text { 


text ~ align: center:; 


. } 


/* 高 度 */ 

/* 痛 景 基色 */ 

/ * flex 模型 布局 关 / 
/< 水 平 排列 * / 

/* 水 平方 自居 中 * / 
/* 分 若 布 局 */ 


/* 宽度 x*/ 


/ * flex 模型 布局 * / 
/x* 水平 排 列 */ 
/* 允许 换行 * / 


/x* 宽度 */ 

/x 高 度 x*/ 

/ x* flex 模型 布局 * / 
/* 垂直 排列 x*/ 

/x 水 平方 向 居中 */ 
/* 分 散布 局 * / 


/x* 文本 居中 显示 */ 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


Ls 


Pagel( { 


/ xx 

3. * 页 面 的 初始 数据 

4. 六 

5. data: { 

6 . lsDownloading: false, 

7. percentNum: 0, 

8. bookList: [1 

9. id: 001 ， 

10. title: 'Java 编程 思想 '， 

11. poster: 'https://img3. doubanio. com/view/subject/l1/public/s27243455. jpg', 
12., fileUrl: 'http://localhost/books/book001. pdf' 

13. }, 

14. { 

15. id: '002", 

16. title:“ 计 算 机 科学 概论 '， 

17. poster: 'https://img3. doubanio. com/view/subject/1/public/s6069865. jpg', 
18. fileUrl: 'http://localhost/books/book002. pdf， 

19. }, 

20. { 

21. id: "003", 

22， title: “安徒生 童话 '， 

23. poster: 'https://img3. doubanio. com/view/subject/l1/public/s28036746. jpg', 
24. fileUrl: 'http://localhost/books/book003. pdf' 

25. }, 

26. { 

六 了， id: '004", 

28. title: ' 三 体 (I)'， 

29. poster: 'https://imgl. doubanio. com/view/subject/1/public/s2768378. jpg', 
14 fileUrl: 'http://localhost/books/book004. pdf' 

a1 }, 1 

32. id: '005", 

了 了。 title: :三 体 (II) '， 

34. poster: 'https://img3. doubanio. com/view/subject/1/public/s3078482. jpg', 
35. fileUrl: 'http://localhost/books/book005. pdf， 

36. }, 

37. { 

38. id: '006", 

39. title: ' 三 体 (III) '， 

40. poster: 'https://img3. doubanio. com/view/subject/1/public/s26012674. jpg', 
41. fileUrl: 'http://localhost/books/book006. pdf， 

42. } 

43. ] 

44. }, 

45. /x*¥ 

46. < 打开 图 书 

47. */ 

48. openBook: function(path) { 

49. wxX. openDocument( { 

30. filePath: path, 

51. success: function(res) { 

52. console. log( ' 打 开 图 书 成 功 ') 

53. }, 

54. fail: function(error) { 

55. console. log(error); 


56 . } 


了 了。 
58. 
了 了。 
60. 
01. 
0b2. 
63. 
64. 
5 . 
66. 
67. 
68. 
69. 
70. 
71. 
了 之， 
73. 
74. 
75. 
76. 
了 了 ， 
78. 
79. 
80. 
81. 
82. 
3: 
84. 
85. 
86. 
87. 
88. 
89. 
90. 
91. 
92. 
93. 
94. 
95. 
96. 
97. 
98 . 
99. 


100. 
101. 
102. 
103. 
104. 
105. 
106. 
107. 
108. 
109 . 
110. 
上 1， 


}) 
}, 


/ 关 基 
* 保存 图 书 
x*x/ 


saveBook: function(id, path) { 
var that = this 
wx. SaveFile( { 
tempFilePath: path, 


success: function(res) { 


// 将 文件 地 址 保存 到 本 地 缓存 中 ,下 次 直接 打开 


let newPath = res. savedFilePath 


wx. setStorageSync( id, newPath) 
// 打 开 图 书 
that. openBook( newPath) 
}, 
fail: function(error) { 


console. log(error) 


that. showTips(' 文 件 保存 失败 !') 


}) 
}, 


/ ¥% 
* 阅读 图 书 
x*x/ 


readBook: function(e) 1 
var that = this 
// 获 取 当 前 点 击 图 书 的 了 D 


let id = e.currentTarget. dataset. 1d 


// 获 取 当 前 点 击 图 书 的 URL 地 址 


let fileUrl = e.currentTarget. dataset. file 


// 查 看 本 地 缓存 
let path = wx.getStorageSync( id) 
// 未 曾 下 载 过 
if (path == ') { 

// 切 换 到 下 载 时 的 蒙 层 

that. setDatal { 

lsDownloading: true 
}) 
// 先 下 载 图 书 


const downloadTask = wx.downloadFilel(t{ 


url: fileUr], 
success: function(res) { 
// 关 闭 下 载 时 的 蒙 层 
that. setDatal { 
lsDownloading: false 


}) 

// 下 载 成 功 

if (res. statusCode == 200) { 
// 获 取 地 址 
path = res.tempFilePath 
// 保 存 并 打开 图 书 
that. saveBook( id, path) 


} 
// 连 上 了 服务 问 , 下 载 失败 


112. 
113. 
114. 
115. 
116. 
117. 
118. 
119. 
120. 
121. 
laa. 
123, 
124. 
125. 
126. 
127. 
128. 
1 23， 
130 
131. 
132. 
133. 
134. 
135. 
136. 
137s 
138. 
139. 
140. 
141. 
142. 
143. 
144. 
145. 
146 . 
147. 
148. 
149. 


else { 
that. showTips( ' 暂 时 无 法 下 载 ! ') 
} 
}, 
// 请 求 失败 
fail: function(e) { 
// 关 闭 下 载 时 的 蒙 层 
that. setDatal { 
lsDownloading: false 
}) 
that. showTips( ' 无 法 连接 到 服务 器 !) 
} 
}) 
// 监 听 当 前 文件 的 下 载 进度 
downloadTask. onProgressUpdate(function(res) { 
let progress = res. progress; 
that. setDatal { 
percentNum: progress 
}) 
}) 
} 
// 之 前 下 载 过 的 ,直接 打开 
else { 
// 打 开 图 书 
that. openBook( path) 
} 
1 


A 关 共 
x 封装 showModal 方法 
关 
showTips: function(content) { 
wx. ShowModal ( { 
title: ' 提 醒 '， 
content: content, 
showCancel: false 
}) 
}, 


150.}) 


程序 。 


。 学 习 小 程序 表单 系列 组 件 的 用 法 ; 
。 学 习 本 地 数据 存储 和 读 取 的 方法 ; 
。 学习 拨打 指定 电话 号 码 的 实现 。 


iOS 系统 自 带 的 健康 App 中 包含 了 “医疗 急救 卡 ” 页 


|, 旨 在 用 户 出 现 过 敏 或 突 发 医疗 情 


况 时 为 急救 人 员 提 供 重 要 的 医疗 健康 信息 和 紧急 联系 人 ,如 图 8-1 所 示 。 


"lll 中国 电信 全 下 午 3:59 


医疗 筷 救 卡 


是 省 遇 12 大 下 


医疗 急救 卡 可 在 您 出 现 诸如 过 敏 
反应 和 医疗 状况 等 骏 急 情况 时 ， 
提供 您 的 重要 医疗 信息 。 

您 不 必 和 解锁 电话 即 可 直接 从 “紧急 
情况 拨号 键盘 访问 医疗 急救 卡 。 


创建 医疗 急救 卡 


图 8-1 


ul 中 国电 信 过 
取消 


下 午时 06 


六 医疗 急救 卡 


区 了 此 39% 面 下 


完成 
傅 出 生日 期 1957 年 10 月 1 日 


医疗 状况 
无 


医疗 笔记 
x 


过 敏 反 应 
无 


用 药 
元 


区 
个 器 官 捐赠 者 合 


@ 体重 | 53 千 克 


@ 血型 


(b) 创建 急救 卡 过 程 


ml 中 国电 信 党 下 午 4:06 


医疗 急救 卡 


1957 年 10 月 1 日 (60 岁 ) 
不 是 器 官 捐赠 者 


地 了 了 襄 39% 男 上 
编辑 


医疗 状况 
无 

医疗 笔记 
无 

过 敏 反 应 
无 

无 


(c) 总 救 卡 创建 完 华 


iDS 健康 App" 医疗 急救 卡 ” 页 面 真 机 截屏 


127 


本 项 目 创建 选择 空白 文件 夹 firstaidCard ,效果 如 图 8-2 所 示 。 
单 击 “新 建 ? 按 钮 完成 项 目 创建 ,然后 准备 手动 创建 页 面 配置 文件 。 


EE ss 


firstaidCard 
Ewaxdemo Wworkspace\ifirstaidCard 
Wx19079110a0f01a8a 
著 无 ApplD 可 注册 
或 使 用 测试 号 
小 程序 
@ 不 使 用 云 服务 
小 程序 : 云 开发 
小 程序 -云天 发 为 开发 青 提供 数据 库 、 存 桩 和 三 苹 数 等 完整 的 二 庙 支 持 ， 无 还 措 


建 服务 露 ， 使 用 平台 提供 的 API 进行 核心 业务 开发 ， 即 可 实现 小 程序 快速 上 上 诸 和 
壬 代 。 了 解 详情 


腾讯 去 


Javascript 


图 8-2 ”小 程序 项 目 填 与 效果 示意 图 


8.3.1 创建 页 面 文件 


项 目 创建 完毕 后 ,在 根 目 录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件。 党 六 党 光 
一 般 来 说 首页 默认 命名 为 index, 表示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 四 时 
称 可 以 自 定 义 。 本 项 目 需 要 保留 首页 (index) ,并 新 增 医 疗 急救 卡 创建 页 ”下 训导 
(form ) 。 

具体 操作 如 下 : 

(1) 将 app.json 文件 内 pages 属性 中 的 “pages/logs/logs” 替 换 成 “pages/form/form”。 

(2) 按 快捷 键 Ctrl 十 S 保存 当前 修改 ,此 时 form 目录 会 日 动 生成 到 pages 文件 夹 下 。 


8.3.2 删除 和 修改 文件 


具体 操作 如 下 : 
(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 
(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 


(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 
(4) 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 自 
动 补 全 黄 数 (如 图 8-3 所 示 )。 


index.]js 对 
1 /rindex.]js 
2 
function OH 
DD Ee 
三 package 
pp pauseBackgroundAudio 
pp previewImage 
;canvasPutImageData 


8-3 输入 关键 词 创建 Page 函数 
(5) 删除 app. wxss 中 的 全 部 代码 。 
(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 目 动 
补 全 了 辑 数 (如 图 8-4 所 示 ) 。 


app.js 者 
1 /fapp.is | 


2 忆 品 
| function OD 
Lpp 


8-4 输入 关键 词 创 建 App 函数 
完成 后 的 目录 结构 如 图 8-5 所 示 。 
十 总 
Y DD pages 
“ [SS form 
J5 form.js 
{} form.json 
< form.waxml 
wss form.WxXss 


- CS index 
JS index.js 


{} index.json 


<> index.wxml 
wss index Wwxss 
J5 app.js 
{} app.json 
wss app.Wxss 


{} project.config.json 


8-5 页 面 文件 创建 完成 


此 时 文件 配置 就 全 部 完成 ,8.4 节 将 正式 进行 页 面 布局 和 样式 设计 。 


S984 视 国 计 


8.4.1 导航 栏 设计 


小 程序 默认 导航 栏 是 黑 底 日 字 的 效果 ,因此 需要 在 app. json 中 目 定 义 导 
骸 栏 标题 和 背景 颜色 。 更 改 后 的 app. json 文件 代码 如 下 : 


| 

2 "pages : |[ 

E "pages/index/ index", 

4. "pages/form/form" 

“ ]， 

6. "window :1{ 

"navigationBarBackgroundColor" :" ## FF2D55", 
8. "navigationBarTitleText": "医疗 急救 卡 " 

9. } 

10. } 


上 述 代 码 可 更 改 所 有 页 面 导 航 栏 标题 文本 为 “医疗 
急救 卡 ”、 痛 景 闫 色 为 红色 (#FF2D55)。 
预览 效果 如 图 8-6 所 示 。 


8.4.2 页 面 设计 


首页 设计 

首页 分 两 种 情况 ,具体 解释 如 下 。 

。 尚未 创建 医疗 急救 卡 : 此 时 只 显示 一 个 “创建 医疗 急救 卡 ” 按 钮 ; Wo 
”已 经 创建 医疗 急救 卡 : 此 时 显示 用 户 的 医疗 信息 ,最 下 方 显示 “ 打 电 话 给 紧急 联系 人 ” 


和 “编辑 医疗 急救 卡 ” 两 个 按钮 。 

页 面 设计 如 图 8-7 所 示 。 

图 8-7(a) 设 计 图 计划 使 用 如 下 组 件 。 

。 页 面 整体 : < view > 组 件 ,并 定义 class 二 = 'container'; 

。 按钮 ; < button > 组 件 。 

图 8-7(b) 设 计 图 计划 使 用 如 下 组 件 。 

。 每 条 信息 : < view > 组 件 , 并 定义 class 一 'box' ,根据 其 排列 方 器 再 定义 class 为 row 
或 col; 

。 医疗 信息 标题 : < label > 组 件 ; 

*。 医疗 信息 文本 : < text > 组 件 ; 

。 按钮 : < button > 组 件 。 

首先 定义 尚未 创建 医疗 急救 卡 时 的 效果 ,WXML(pages/index/index. wxml) 人 代码 片段 如 下 : 
<!-- 尚未 创建 医疗 急救 卡 显 示 该 页 面 -一 > 
<Vlew Class = 'container'> 


1 
pi 
和 < button > 创建 医疗 急救 卡 </button > 
4, </view> 


D 第 8 章 “小 程序 数据 AP1, 医疗 急救 卡 三 


用 户 医 疗 信 息 


(a) 尚未 创建 医疗 总 救 卡 的 页 面 效果 (b) 已 经 创建 医疗 急救 卡 的 页 面 效 条 
8-7 页面 设计 图 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1 . Container!{ 

p height: 100vh; /* 高 100 视窗 ,写成 100 无效 */ 
3. display: flex; /x* flex 布局 模型 * |/ 

4. flex— direction: column; /* 王 耳 布局 */ 

5 align — items: center; /* 水 平方 器 居中 */ 

6 Justify— content: center.; /xx 垂直 方 回 居中 关 / 

171. 1 

由 于 按钮 样式 需要 与 form 页 面 统一 ,可 以 与 到 app. wxss 文件 中 。 
app. wxss 代码 片段 如 下 : 

1. /x 按钮 样式 */ 

2. button{ 

3. background — color: 井 FE2D55 ， /x* 背景 颜色 为 红色 * / 

4. color: white， /* 字体 颜色 为 白色 x*/ 

5. margin: 20rpx; /关外 边 距 关 / 

6. |} 


当前 效果 如 图 8-8 所 示 。 
由 图 可 见 , 此 时 页 面 初始 效果 已 经 完成 。 接 下 来 需要 使 用 wx:if 和 wx:else 属性 切换 医 
疗 急救 卡 创建 完 成 后 的 页 面 设计 效果 。 
WXML(pages/index/index. wxml) 人 代码 片 段 修 改 如 下 : 
<!-- 尚未 创建 医疗 急救 卡 显示 该 页 面 --> 
< view class = 'container' wx: if = '{{!myCard}}'> 


1 
2 
3. < button > 创建 医疗 急救 卡 </button > 
4. </view> 


5. <!-- 医疗 急救 卡 创建 完成 后 显示 该 页 面 -- > 
6. view wx:else > 
1. < view class= 'row box'> 


TT 


8. < label> 出 生日 期 </label > 

9. < text> 2000 - 01 - 01 </text > 
10. < Label > 血型 </1abel > 

和 < text > A VU</text > 


12. </view> 
13. < view class= 'row box'> 


14. < label > 身高 </label > 
15. < text > 100 厘米 </text > 
16. < label > 体重 </label > 
17. < text > 50 和 干 克 </text > 


18. </view> 

19. < view class= 'col box'> 

20. < label > 医疗 状况 </label > 
21. < text></text > 

22. </view> 

23. < View class= 'col box'> 

24. 刀 label > 医疗 笔记 </1label> 
25. < text></text > 

26. </view> 

了 < view class= 'col box'> 

28. < label > 过 敏 反 应 </label > 
29 < text > 天 </text > 8-8 首页 (尚未 填写 医疗 急救 卡 ) 预 览 效果 
30 . </view> 

31. < view class= 'col box'> 

32. < label> 用 药 </label > 

33. < text></text> 

34. </view> 

35. < View class= 'row box'> 

36. < label > 器 官 捐赠 者 </label > 

Sn, < text> 否 </text > 

38. </view> 

39. < view Class = 'row box'> 

40. < label > 紧急 联系 人 </label> 

41. < text> 10086 </text > 

42. </view> 

43. < button> 打 电话 给 紧急 联系 人 < /button > 

44. “< button > 编辑 医疗 急救 卡 </button > 

45. < /view> 


为 了 预览 测试 效果 ,上 述 代 码 中 的 医疗 数据 均 为 临时 填 入 ,后 组 会 改 为 动态 数据 。 
app. wxss 增加 代码 片段 如 下 : 


1. /x* 标签 样式 */ 

2. label I 

3. color: FEF2D55; /* 字体 颜色 为 红色 * / 
4. margin ~— right:25rpx; /* 右边 距 x*/ 

5. |} 

6. /x 水平 布局 */ 

7. .row 1{ 

8. display: flex; /x* flex 布局 模型 */ 
9., flex— direction: row; / 关 水 平 布 局 关 / 

10. } 

11. /* 王 直 布局 */ 

12. .col { 


13. display: flex; /* flex 布局 模型 x / 


14. flex— direction: column; /* 玲 直 布局 */ 


15. } 

16. /* 和 杀 上 日 盒子 */ 

17. .box { 

18. border — bottom: lrpx solid silver; /x* 1rpx 宽 的 银色 实 线 下 边框 x* / 

19. margin: 10rpx 20rpx; /x 上 下 外 边 距 10rpx, 左右 外 边 距 20rpx* / 
20. padding: 10rpx; /关内 边 距 关 / 

21. | 

22. /x* 文本 样式 */ 

23. text{ 


24. margin ~— right:25rpx; 

25. | 

为 了 预览 已 经 创建 完成 的 效果 ,可 以 临时 在 index.js 的 data 中 设置 myCard 为 true, 看 完 
后 再 改 回 false。 

JS(pages/index/index. js) 代 码 片 段 修 改 如 下 : 


1. Pagel({ 

2 data: { 

3， myCard :true /7 预览 后 请 改 回 false 
4. } 

3 1 


当前 效果 如 图 8-9 所 示 。 

由 图 可 见 , 此 时 首页 已 经 完成 创建 医疗 急救 卡 前 后 的 布局 和 样式 设计 工作 。 
医疗 急救 卡 创 建 页 设计 

医疗 急救 卡 创建 页 用 于 展示 医疗 信息 表单 ,主要 包含 以 下 内 容 。 
。 出 生日 期 : 点 击 弹 出 滚动 选择 硕 选 择 年 月、 日 ; 

。 医疗 状况 : 多 行文 本 框 ; 

。 医疗 笔记 : 多 行文 本 框 ; 

。 过 敏 反 应 : 多 行文 本 框 ; 

。 用 药 : 多 行文 本 框 ; 

血型 : 点 击 弹 出 深 动 选择 器 选择 血型 (未 知 .A、B、O、APB); 
。 着 家 捐赠 者 : 切换 是 或 者 否 ; 

。 身高 : 单行 文本 输入 框 , 单 位 为 厘米 ; 

。 体重 : 单行 文本 输入 框 , 单 位 为 千克 ; 

。 紧急 联系 人 号 码 : 单行 文本 输入 框 ,输入 电话 号 码 。 
页 面 设计 如 图 8-10 所 示 。 

当前 页 面 计划 使 用 如 下 组 件 。 

。 页 面 整体 . < form > 组 件 ; 

。 每 条 信息 : < view > 组 件 , 并 定义 class 王 'box', 根 据 其 排列 方向 再 定义 class 为 row 或 col; 
。 信息 标签 : < label > 组 件 ; 

。 选择 需 : < picker > 组 件 ; 

。 是 否 开 关 ; < switch > 组 件 ; 

多 行文 本 输入 框 : < textarea > 组 件 ; 

单行 文本 输入 框 : < input > 组 件 ; 

。 按钮 : <button > 组 件 。 


TTT [| 


出 生日 期 2000-01-01 血型 A 型 
身高 100 厘 米 体重 50 干 克 


医疗 状况 
无 


医疗 笔记 
励 


ge 用 户 医疗 信息 


用 药 
无 


器 官 捐赠 者 否 
紧急 联系 人 10086 


打 电 硒 给 紧 名 联 系 人 


编辑 医疗 急救 卡 : 人 


“上 旺 除 医疗 急救 卡 ”按钮 


图 8-9 首页 (已 填 医 疗 急救 卡 ) 预 览 效果 图 8-10 医疗 急救 卡 创建 页 设计 图 


医疗 急救 卡 创建 页 是 需要 点 击 首 页 按钮 跳 转 才 可 以 显示 的 ,为 了 设计 方便 ,可 临时 将 
app. json 中 pages 属性 里 的 form 与 index 路 径 对 调 , 以 确保 form 页 面 可 以 直接 显示 出 来 。 
WXML(pages/form/form. wxml) 代 人 码 厂 段 如 下 : 


1. <form bindsubmit = 'submitForm'> 

2. <Vlew Class= 'row boX > 

3. < label > 出 生日 期 </label > 

4. < picker name = 'date' mode = 'date' bindchange = 'dateChange' value = '{{date}}'> 
5. <view>{{date} }</view> 

6. </picker > 

7. </View> 

8. <View Class= CO] box > 

9 . < label > 医疗 状况 </label > 

10. < textarea name = 'ylzk' auto ~— height value = '{{vlzk}}'></textarea > 
11. </view> 

12. <Vliew Class = CO] box > 

13. < label > 医疗 笔记 </label > 

14. < textarea name = 'ylbj' auto - height value = '{{vylbj}}'></textarea > 
1 </ View> 

16. <Vlew Class = 'col box'> 

17. < label > 过 敏 反 应 </1Label > 

18. < textarea name = 'gmfy' auto - height value = '{{gmfvy}}'></textarea > 
19. </view> 

20 . < VLIew Class = CO box > 

21. < label > 用 药 </label > 

22. < textarea name = 'yy' auto — height value = '{{yy}}'></textarea > 

23. </view> 

24. < Vlew Class = IOW box'> 

25. < Label > 血型 </ 1abel > 

26. < picker name = 'blood' range = '{{bloodItems}}' bindchange = 'bloodChange' value = 


'{{blood}}'> 


27， <view>{{blood} } 型 </view > 

28. </picker > 

29. </view> 

30， <Vlew Class= IOW box > 

31. < label > 磊 官 捐赠 者 </label > 

32. < Switch name = 'qgjz' color = '# FF2D55' checked = '{{ggjz}}'></switch> 

3 </ Tiew> 

34. < VLIeW Class = IOW box'> 

局 < label > 身高 </label > 

36. < input name = 'height' class = 'shortInput' type = 'digit' value = '{{height}}'></input > 
<text> 厘 米 </text > 

37. < label > 体重 </label > 

38. < input name = 'weight' class = 'shortInput' type = 'digit' value = '{{weight}}'></input > 
< text> 干 克 </text > 

39 </view> 

40. <Vliew Class= “IOW box > 

41. < Label > 紧急 联系 人 与 公 </label > 

42. < input name = 'tel' class = 'longInput' type = 'number' value = '{{tel}}'></input > 
43. </view> 

44. < button form— type = 'submit' 人 > 完成 创建 </button > 

45. < button bindtap = 'delMyCard'> 删 除 医疗 急救 卡 </button> 

46. </form> 


WXSS(pages/form/form. wxss) 代 码 片 段 如 下 : 


1. /* 表单 ,多 行文 本 框 样式 */ 

2. form,textareal 

3. width: 100%.; 

4. |} 

5. /x* 文 本 输入 框 样式 x*/ 

6. .ShortInputi{ 

7. width: 100rpx; 

8. |} 

日 . longInpu 二 { 生硬 硬 重 面 和 EC hat 过 

10. width: 200rpx; < 

11. | 出 生日 期 2000-01-01 
JS(pages/form/form.js) 代 码 片 段 如 下 : = 

/ ¥¥ 医疗 笔记 

2. * 页 面 的 初始 数据 

3. 关 / 

4. data: 1 

5. date: '2000— 01—01', // 出 生日 期 用 药 

6 . Ylzk: 万", /7 医疗 状况 无 

7. vibj: "ho" // 医 疗 笔记 

8. gmfv: ' 无 '， // 过 敏 反应 血型 A 型 

9. YY: "无 "， // 用 药 器 官 捐 赠 者 ( 

10. blood: 'A', // 血 型 en 国 z 
11. qgjz: false, // 征 家 捐赠 者 3 100 属 水 体 刘 20 TT 
2 height: '100'， // 匡 高 紧急 联系 人 号 码 10086 
13. weight: '50°', // 体重 

14. bloodItems: [' 未 知 '，'A'，'B',，'0'，'AB'] // 血 型 列表 

15. } 


当前 效 玉 如 图 8-11 所 示 。 


删除 医疗 急救 卡 


由 图 可 见 , 此 时 可 以 显示 默认 数据 内 容 。 8-11 面板 1 预览 效果 


8.5.1 尚未 创建 医疗 急救 卡 的 首页 的 逻辑 实现 
尚未 创建 医疗 急救 卡 的 首页 只 有 点 击 “ 创 建 医疗 急救 卡 ” 按 钮 跳 转 新 页 面 


修改 WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 
<!-- 尚未 创建 医疗 急救 卡 显示 该 页 面 --> 


< View class = 'container' wx:if = '{{!'myCard}}'> 


1 
3. < button bindtap = 'goToForm'> 创 建 医疗 急救 卡 </button > 
4. 


</view> 


在 JSCpages/index/index. js) 中 添加 goToForm 明 数 ,代码 片段 如 下 : 


1. Page({ 

// 打 开 表 单 页 面 

本 goToForm: function( ) { 
4. wx. navigateTol { 

5. url: '../form/form', 
6. }) 

7. } 

8. |}) 

运行 效果 如 图 8-12 所 示 。 


创建 医疗 急救 卡 | 


(a) 首页 (尚未 创建 医疗 急救 卡 ) 


出 生日 期 2000-01-01 
医疗 状况 


医疗 笔记 
万 
过 敏 反应 
无 


用 药 
无 


血型 A 型 
器官 捐赠 者 人 

身高 100 厘米 体重 50 ”千克 
紧急 联系 人 号 码 10086 


删除 医疗 急救 卡 


(b) 跳 转 总 束 卡 创建 页 


图 8-12 点击 "创建 医疗 急救 卡 " 按 钮 跳 转 急救 卡 创建 页 


8.5.2 ”医疗 急救 卡 创 建 页 的 逻辑 实现 


为 这 两 个 组 件 妃 加 bindchange 事件 ,相关 代码 如 下 : 


追加 bindsubmit 事件 ,相关 代码 如 下 : 


更 新 选择 器 
修改 WXML 文件 (pages/form/form. wxml) 的 两 个 < picker > 组 件 , 分 别 


1. <form> 

- <Vlew Class= 'row box'> 

3. < label > 出 生日 期 </label > 

4. < picker name = 'date' mode = 'date' bindchange = 'dateChange' value = '{{date}}'> 
5. <view>{{date} }</view > 

6. </picker > 

41. 

8. < Vlew Class= 'row box'> 

9 . < label > 血型 </label > 

10. < picker name = 'blood' range = '{{bloodItems}} ”bindchange = ' bloodChange ' value = 
'{{blood}}'> 

11. < View>{{blood}} 型 </view > 

12. </picker > 

13. </view > 

14. 


15. </view> 


在 JS 文件 (pages/form/form.js) 中 添加 dateChange 和 bloodChange 函数 ,代码 如 下 : 


1. Pagel{ 

py // 更 新 日 期 

3 dateChange: function(e) { 

4 let value = e. detail. value; // 获 得 选择 的 日 期 

5., this. setData({ date: value }):; /将 选项 名 称 更 新 到 WZML 页 面 上 
6 上 ， 

7 // 更 新 血型 

8 bloodChange: function(e) { 

9 let 1 = e. detail. value; /7 获得 选择 的 血型 序号 

10. this. setData({ blood: this. data.bloodItems[i] }); // 将 选项 名 称 果 新 到 WZML 页 面 上 
11: ks 

12. }) 

此 时 可 以 将 滚动 选择 天 修改 的 内 容 更 新 到 当前 页 面 , 如 图 8-13 所 示 。 
表单 提交 


修改 WXML 文件 (pages/form/form. wxml) 的 < form > 组 件 , 为 该 组 件 


1. <form bindsubmit = 'submitForm'> 
» 攻 
3. </form > 


在 JS 文件 (pagesy/formyform. js) 中 添加 submitForm 图 数 , 代 但 如 下 : 


1. Pagel{ 
2. // 提 交 表 单 
3. submitForm: function(e) { 


出 生日 期 2000-01-01 
医疗 状况 


无 


无 


用 药 
无 


血型 A 型 
器 官 捐赠 者 ( 


出 生日 期 1997-07-01 


医疗 状况 
无 
医疗 笔记 
无 
过 第 反应 


无 


用 欧 
无 


血型 AB 型 
器 官 捐 赠 者 | 


身高 100 厘米 体重 50 和 干 克 
紧急 联系 人 号 码 10086 


身高 100 厘米 体重 50 ” 干 克 
紧急 联系 人 号 码 10086 


删除 医疗 急救 卡 删除 医疗 急救 卡 


(a) 初始 表单 效 末 (b) 更 新 日 期 和 血型 数据 后 的 效果 
图 8-13 ”更 新 选择 器 的 预览 效果 


4. // 同 步 保 存 数据 

wx. SetStorageSync( 'myCard', e. detail. value) 
6. // 成 功 后 返回 首页 

了 . wx. navigateBack( ) 

8. } 

3 


此 时 填写 任意 数据 ,然后 单 击 “ 完 成 创建 "按钮 ,调试 人 Storage 面板 如 图 8-14 所 示 。 


[ 民 Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 
| 过渡.… 


+ Object: /oate 2O00-07-07 "blood "A" "gagjz “false height™ "100" "wel 


8-14 ”表单 提交 后 调试 器 Storage 面板 的 预览 效果 


由 图 可 见 ,提交 表单 后 已 经 成 功 将 数据 保存 到 本 地 缓存 中 ,其 中 Key 名 
称 为 myCard, 该 名 称 也 可 以 由 开发 者 日 定义 。 


删除 医疗 急救 卡 

修改 WXML 文件 (pages/form/form. wxml) 的 “删除 医疗 急救 卡 ” 按 钮 ， 
相关 代码 如 下 ， 

1 < form bindsubmit = 'submitForm'> 

2 i 

3. < button bindtap = 'delMyCard'> 删 除 医 疗 急 救 卡 </button > 

4. </form > 


在 JS 文件 (pages/form/form.js) 中 添加 delMyCard 函数 ,代码 如 下 : 


1. Pagell 

2 二 

3. // 删 除 医疗 急救 卡 

4. delMyCard: function() { 
5. // 同步 删除 数据 

6. Wx. removeStorageSync( 'myCard') 
7. // 成 功 后 返回 站 页 
8. wx. navigateBack( ) 

9. | ， 

10. 

11. }) 


出 生日 期 1996-01-01 
医疗 状况 


医疗 笔记 

测试 

过 敏 反应 

无 

用 药 

无 

血型 A 型 

器 官 捐赠 者 芒 ) 

身高 180 厘米 体重 60 ”和 干 克 
紧急 联系 人 号 码 10086 


创建 医疗 急救 卡 


mm Bl 二 
完成 创建 


删除 医疗 急救 卡 


(a) 填 有 内 容 的 医疗 急救 卡 (b) 删除 信息 并 返回 下 页 
图 8-15 删除 医疗 急救 卡 的 效果 


由 图 可 见 ,此 时 点 击 “删除 医疗 急救 卡 ”按钮 将 清空 缓存 数据 并 返回 首页 。 
8.5.3 已 经 创建 急救 卡 的 首页 的 逻辑 实现 

读 取 本 地 缓存 数据 

首页 需要 进行 本 地 缓存 的 读 取 ,这 样 才 可 以 正确 显示 最 新 的 医疗 数据 。 


在 JS 文件 (pages/index/index. js) 的 onShow 函数 中 获取 本 地 数据 ,相关 视频 讲解 
代码 如 下 : 


1. Pagelf{ 

2. onShow: function() { 

3. // 同 步 获取 本 地 缓存 

4 let myCard = wzx.getStorageSync( "myCard ' ) 


// 更 新 动态 数据 
this. setData({ myCard: myCard }) 
} 
}) 


co ~ oO w 


将 WXML 文件 (pages/index/index. wxml) 的 所 有 医疗 数据 改 为 动态 数据 ,相关 代码 
如 下 : 


1. <!-- 急 救 卡 创建 完成 后 显示 该 页 面 --> 
2 < Vlew wxX:else> 

3 <Vlew Class = ITOW box'> 

4. < label > 出 生日 期 </label > 

5. < text >{ {myCard. date} }</text > 

6 < 1]abel > 血型 </]abel > 

了 < text >{{myCard. blood] } 型 </text > 
8 

9 


</view> 

i < Vlew Class= 'row box'> 
10. < label > 二 高 </label > 
11. < text >{{myCard. height}} 厘 米 </ text > 
12. < label > 体重 <//label > 
13. < text >{{myCard. weight}} 干 殉 </text > 
14. </ View > 
15 . < VIew class = 'col box'> 
16. < label > 医疗 状况 </label > 
和 < text >{{myCard. ylzk} }</text > 
18. </view> 
19 . <Vlew Class= CO] box > 
20. < label > 医疗 笔记 </label > 
91. < text >{{myCard. ylbj}}</text > 
-A </view> 
23. <Vlew Class= CO] box > 
24. < label > 过 敏 反 应 </label > 


25. < text >{{myCard. gmfy} }</text > 


26. </view> 


27. <View class = 'col box > 

28. < label > 用 药 </label > 

29. < text >{{myCard. YY} }</text > 
30. </view> 

31. < VlIew class = 'row box'> 

32. < label > 器 官 捐赠 者 </label > 
33. <text >{{myCard.qgjz?' 是 ': ' 否 '}}</text > 
34. </view> 

Ce <Vlew Class= “IOW box > 

36. < Label > 紧急 联系 人 </1label > 

3 了 7.。 < text >{{myCard. tel} }</text > 
38. </view> 

39. 


40. </view> 


运行 效果 如 图 8-16 所 示 。 

由 图 可 见 , 首 页 已 经 成 功 读 取 到 本 地 缓存 中 的 数据 并 显示 出 来 。 

打 电 话 给 紧急 联系 人 

修改 WXML 文件 (pages/index/index. wxml) 中 的 “ 打 电 话 给 紧急 联系 
人 ”按钮 ,为 其 绑 定 自 定义 的 tap 事件 ,相关 代码 如 下 : 


出 生日 期 1996-01-01 血型 A 型 
身高 180 厘 米 体重 60 干 克 
医疗 状况 

无 


医疗 笔记 


无 


用 药 
无 


器 官 捐赠 者 是 
紧急 联系 人 10086 


8-16 显示 本 地 缓存 数据 


<!-- 急 救 卡 创建 完成 后 显示 该 页 面 -一 > 


< TILeW WX:else> 


< button bindtap = 'makecal1'> 打 电话 给 紧急 联系 人 </Dbutton > 
</view> 


在 JS 文件 (pages/index/index. js) 中 添加 和 目 定义 函数 makeCall, 相 关 代 人 码 如 下 : 


in 


1. Pagelf{ 

i ee 

3. // 打 电话 给 紧急 联系 人 
4. makeCall: function() { 
5. let tel = this. data. myCard. tel 
6. wx. makePhoneCall({ 
7. phoneNumber: tel 
8. }) 

9. }, 

10. 要 

11. 月 


运行 效 朱 如 图 8-17 所 示 。 
由 图 可 见 , 开 发 工具 已 实现 拨打 电话 的 模拟 效果 。 如 果 使 用 带 有 电话 卡 的 呐 机 测试 ,可 以 


拨打 真实 电话 。 

编辑 医疗 急救 卡 

修改 WXML 文件 (pages/index/index. wxml) 中 的 “编辑 医疗 急救 卡 ” 按 六 
钮 ,相关 代码 如 下 : 


1. <!-- 急 救 卡 创建 完成 后 显示 该 页 面 --> 


2, <Vlew wx:else> 


小 程序 数据 AP1 , 医疗 急救 上 


拨打 100863【 公 为 模拟 】 


i 
-ol 


8-17 ”模拟 拨打 电话 的 提示 


a 
4. < button bindtap = 'goToForm'> 编 辑 医 疗 急 救 卡 </button > 

5. </view> 

上 述 代 码 中 的 自 定义 函数 goToForm 在 之 前 已 经 完成 ,用 于 跳 转 到 医疗 急救 卡 创建 页 。 
更 新 JS 文件 (pages/formyform. js) 的 onLoad 图 数 , 相 关 代 人 码 如 下 : 


1. Pagel({ 

2 . 攻 

3 onLoad: function(options) { 
4. let myCard = wx.getSstorageSync( 'myCard ' ) 
// 有 数据 

6. if (myCard != "') { 

了 this, setDatal { 

8. date: myCard. date, 

9 . ylzk: myCard. ylzk, 

10. ylb]: myCard. ylb]j, 

11. gmfy: myCard. gmfy, 

12， yy: myCard. yy, 

13. blood: myCard. blood, 
14. qgjz: myCard. qgjz, 

本 height: myCard. helght， 
16. weight: myCard. weight 
17. }) 

18. } 

19. ys 

20. 

2 于 


上 述 代码 表示 打开 医疗 急救 卡 创建 页 时 先 读 取 一 下 本 地 缓存 ,如 果 有 数据 , 则 显示 已 经 保 


存 的 数据 等 竺 新 一 轮 编 辑 。 
运行 效果 如 图 8-18 所 示 。 


出 生日 期 1996-01-01 
医疗 状况 
无 


医疗 笔记 
测试 


用 药 
无 


当 官 所 风 者 入 
身高 180 厘米 体重 60 千克 
紧急 联系 人 号 码 10086 


删除 医疗 急救 卡 


图 8-18 显示 本 地 缓存 数据 的 医疗 急救 卡 创建 页 
由 图 可 见 , 此 时 重新 打开 的 医疗 急救 卡 创建 页 可 以 显示 本 地 缓存 中 的 数据 。 


8.6.1 应 用 文件 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


1 

2. "pages : | 

3. "pages/index/ index", 

4. "pages/form/form" 

5. ]， 

6 . "window : { 

到 "navigationBarBackgroundColor" : " #FF2D55", 
8. "navigationBarTitleText": "医疗 急救 卡 " 

9. } 

10. } 


app. wxss 文件 的 完整 代码 如 下 ， 


1. /x* 按钮 样式 x / 

2. button{ 

3 background — color: #FF2D55; /x* 背景 糊 色 为 红色 */ 
4. color: white. /* 字体 颜色 为 白色 x*/ 


3 margin: 20rpx; 

6. |} 

7. /x 标签 样式 */ 

8. label { 

9 . color: 井 EFE2D55; 

10. margin — right:25rpx; 
11. } 

12. /* 水 平 布局 */ 

13. .row { 

14. display: flex; 

es flex— direction: row; 
16. | 

17. /xx* 王 直 布 局 关 / 

18. .col { 

19. display: flex; 

20. flex— direction: Column， 
21. } 

22. / * 条 目 盒 于 */ 

23,. .box { 

24. border — bottom: lrpx solid silver; 
25. margin: 20rpx; 

26. padding: LOFrPX， 


"x 
8.6.2 页 面 文件 代码 展示 
首页 代码 展示 


/关外 边 距 关 7/ 


/* 字体 颜色 为 红色 x / 
/* 右边 距 */ 


/ * flex 布局 模型 x* / 
/* 水 平 布局 */ 


/x* flex 布局 模型 * / 
/* 王 直 布局 */ 


/* lrpx 宽 的 银色 实 线 下 边框 <V/ 
/x 外边 中 x*/ 
/* 内 边 距 */ 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


1. <!-— pages/index/index. wzml -一 > 

2. <!-- 尚未 创建 急救 卡 显示 该 页 面 -一 > 
3. <View class = 'container' wx:if= '{{!'myCard}}'> 
4. < button bindtap = 'goToForm'> 创 建 医疗 急救 卡 </button > 
5. </view> 

6. <!-- 急 救 卡 创建 完成 后 显示 该 页 面 -一 > 
7. <Vlew wx:else> 

8. <Vlew Class = 'row box'> 

9. < label> 出 生日 期 </l]abel > 

10. < text >{{myCard. date} }</text > 
11. </view> 

12. < View class= 'col box'> 

13. < label > 医疗 状况 </label > 

14. < text >{{mvyCard. ylzk} }</text > 
15. </View> 

16. <Vliew class = ‘col box > 

17. < label > 医疗 笔记 </label > 

18. < text >{{myCard. ylbj}}</text > 
19. </view> 

20. < Vlew Class = 'col box'> 

71; < label > 过 第 反应 </label > 

2 < text >{{myCard. gnfy} }</text > 
23. </view> 

24. < VIew Class = 'col box'> 


25. < label > 用 药 </label > 


20. 
之 了， 
28. 
29. 
30. 
1 
J 
33. 
34. 
35. 
36 . 
Ea 
38. 
329, 
40. 
41. 
42. 
43. 
44. 
45 . 
46 . 
47. 


< text >{{myCard,. vy} }</text > 
</view> 


<Vviliew class = "row box > 

< label > 血型 </label > 

< text >{{myCard. blood} } 刑 </text > 
</ View> 
< VLIew Class = "row box'> 


< label > 升官 捐赠 者 </Label > 


< text >{{myCard. qggjz?' 是 ': ' 否 '}}</text > 


</view> 
<Vliew Class = 'TOW box'> 
< label > 身高 </1Label > 


< text >{ {myCard. height} }</text > 厘米 


</view> 
<Vlew Class = 'row box'> 
< label > 体重 </1label > 


< text >{ {myCard. weight}}</text > 和 干 克 


< /View > 


< button size = 'mini' bindtap = 'goToForm'> 编 辑 医 疗 急 救 卡 </button> 
<button size = 'mini' bindtap = 'delMyCard'> 删 除 医疗 急救 卡 </button > 
</view > 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 ， 


-i 


. Containerl{ 


} 


height: 100vh; 

display: flex; 

flex— direction: column; 
align ~ items: center; 
Justify— content: center; 


/x 高 100 视窗 ,写成 100% 无 效 */ 
/ x flex 布局 模型 * / 

/* 惟有 是 布局 */ 

/ 基 术 平 方 呵 居中 x/ 

/* 答 直 方向 居中 */ 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


] 
2 
3 
4. 
: 
6 
7 
8 
9 


Pagel( { 


data: { 
myCard :false 
}, 
// 打 开 表 单 页 面 
goToForm: function() { 
多 让。 navigateTo( { 


url: '../form/form', 
}) 
}, 
// 删 除 医 闻 急 救 卡 


delMyCard:function( ){ 
WX. TemoVeStorageSync( 'myCard') 
this. setData({ myCard: false }) 
}, 
onShow: function() { 


let myCard = wx. getStorageSync( 'myCard') 


// 有 数据 
if (myCard != ') { 

this. setData({ myCard: myCard }) 
} 


22. 
23. 


} 


医疗 急救 卡 创建 页 代码 展示 
WXML 文件 (pages/form/form. wxml) 的 完整 代码 如 下 . 


1. <form bindsubmit = 'submitForm'> 

2. <Vlew Class = 'row box'> 

3. < label> 出 生日 期 </l]abel > 

4. < picker name = 'date' mode = 'date' bindchange = 'dateChange' value = '{{date}}'> 
5. <view>{{date} }</view> 

6. </picker > 

7 </ View> 

8. <Vlew Class= CO] box > 

9. < label > 医疗 状况 </label > 

10. < textarea name = 'ylzk' auto - height value = '{{vlzk}}'></textarea > 
11. </view> 

12. < VIEW class = 'col box'> 

13. < label > 医疗 笔记 </label > 

14. < textarea name = 'ylbj' auto - height value = '{{vlbj}}'></textarea > 
15. </view> 

16. < Vlew Class = "col box > 

1 了 7 < label > 过 敏 反 应 </label > 

198. < textarea name = 'gmfy' auto — height value = '{{gmfvy}}'></textarea > 
19., </view> 

-A < Vlew class = 'col box > 

21. < label > 用 药 </label > 

22 < textarea name = 'yy' auto — height value = '{{vy}}'></textarea > 

23. </view> 

24. < Vlew Class = IOW box'> 

-A < label> 血 型 </label > 

26. < picker name = 'blood' range = '{{bloodItems}} ' bindchange = ' bloodChange ' value = 
'{{blood}}'> 

27. <view>{{blood} } 型 </view > 

28. </picker > 

29. </view> 

0 < Vliew Class = 'row box'> 

31. < label > 闫 官 捐赠 者 </label > 

32. < Switch name = 'gqgjz' color = '# FF2D55' checked = '{{qgjz}}'></switch> 
33， < /view > 

34. <Vlew Class= IOW box > 

35. < label > 二 高 </label > 

36 . < input name = 'height' type = 'digit' value = '{ {height}}'></input > 厘米 
37. < /view > 

38 . <Vlew Class= IOW boX > 

39. < label > 体重 <//label > 

40. < input name = 'weight' type = 'digit' value = '{ {weight}}'></input > 千 殉 
41. </View > 

42. < button form type = 'submit'> 完 成 创建 </button > 

43. </form> 


WXSS 文件 (pages/form/form. wxss) 的 完整 代码 如 下 : 


1. 
之 。 
中 


/ * 表单 .多 行文 本 框 样式 x / 


form, textareal 


width: 100%; 


co = 吕 ( 心 


JS 文件 (pages/form/form.js) 的 完整 代码 如 下 : 


} 
/x* 文本 输入 框 样式 */ 
input{ 

width: 100rpx; 


} 


1. Pagel({ 

2. data: 1 

3. date: '2000-01-01'， // 出 生日 期 

4. vlzk: "无 '", // 医 疗 状 况 

5. vibj: "万 ", // 医 疗 笔 记 

6. gmfy: “无 '， /7/ 过 敏 反应 

7. vy "hi" // 用 药 

8. blood: 'A', // 血 型 

9. qg]z: false, // 胡 官 捐赠 者 

10. height: '100°', // 生 融 

11. weight: '50", // 体 重 

12. bloodItems: [' 未 知 ',，'A','B',，'0','AB'] // 血 型 列表 

LE 

14. // 更 新 日 期 

1 5、 dateChange: function(e) { 

16. let Value = e. detail. value; // 绪 得 选择 的 日 期 

17. this. setData(l{ date: value } ); // 将 选项 名 称 昌 新 到 WZML 页 面 上 
18. } ， 

19.  // 更 新 血型 

20. bloodChange: function(e) { 

21. let i = e.detail. value. // 获 得 选择 的 血型 序号 
» this. setData({ blood: this. data. bloodItems[i] }); // 将 选项 名 称 旨 新 到 WZML 页 面 上 
23. } 


24.，// 提 交 表 单 
25. submitForm: function(e) { 


26. console. log(e. detail. value) ; 

-i // 异 步 保 存 数据 

28. wx. SetStorageSync( 'myCard', e. detail. value) 
29. // 成 功 后 返回 首页 

30. wx. navigateBack( ) 

有 }, 

32. onLoad: function (options) { 

世代 let myCard = wx.getStorageSyncl( 'myCard') 


34. // 有 数据 
ca if(myCard != …) { 


36. this. setDatal { 

37. date: myCard. date， 

38 . ylzk: myCard. ylzk, 
39. ylbj]: myCard. ylb], 

40. gmfy: myCard. gmfy, 
41. yy: myCard. yy, 

42. blood: myCard. blood, 
43. qg]z: myCard. qg]z， 

44. height: myCard. helght， 
45. weight: myCard. weight 
46. }) 

47. } 

48. } 


小 程序 位 置 AP| . 会 议 邀 请 函 


本 章 主要 使 用 小 程序 位 置 API 的 相关 知识 制作 一 款 会 议 邀 请 也 小 程序 。 
pe = 

。 掌握 获取 位 置 的 接口 的 使 用 方法 ; 

。 掌握 查看 位 置 的 接口 的 使 用 方法 ; 

。 掌握 地 图 组 件 控制 的 系列 接口 的 使 用 方法 。 


本 项 目 创建 选择 空白 文件 夹 invitationDemo, 效 果 如 图 9-1 所 示 。 ee 
单 击 “ 新 建 ”按钮 完成 项 目 创建 ,然后 准备 手动 创建 页 面 配置 文件 。 视频 讲解 


E-WAxdemo_workspaceunvitationDermo 


车 无 AppiD 可 注册 
或 使 用 测试 号 


图 9-1 小 程序 项 目 填 写 效果 示意 图 


程序 开发 实战- 微 课 视频 版 tO 


9.2.1 创建 页 面 文件 


项 目 创建 完毕 后 ,在 根 目录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 党 味 党 全 
一 般 来 说 首页 默认 命 六 名 为 index, 表 示 小 程序 运 云 行 的 第 一 个 页 责 面 ; 其 他 页 而 面 名 [a] 有 


陈 可 以 自 定义 。 本 项 目 只 需要 保留 首页 (index) 即 可 ， 本 
(1) 将 app. json 文件 内 pages 属性 中 的 “pages/logs/logs ”删除 ,并 删除 上 一 行 末 尾 的 
逗号 。 


(2) 按 快 捷 键 Ctrl 十 $ 保存 当前 修改 。 
9.2.2 删除 和 修改 文件 


具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并且 输入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 月 
动 补 全 图 数 ( 如 图 9-2 所 示 )。 


index.js 者 


1 fiindex,.js 
2 


Function Oh 


5 BetCurrentpages 

全 package 

A pauseBackgroundAudio 
AP previewImage 

A canvasPutImageData 


图 9-2 输入 关键 词 创建 Page 函数 


(5) 删除 app. wxss 中 的 全 部 代码 。 
(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 日 动 
补 全 卫 数 (如 图 9-3 所 示 ) 。 


app.js 各 
1 tfapp.js 


2 a 
《3 function 0 
1 RPP 


中 getApp 


9-3 输入 关键 词 创建 App 函数 


人 SC 第 9 章 “小 程序 位 置 Ap1 . 会 议 邀 请 函 


9.2.3 创建 其 他 文件 


接 下 来 创建 其 他 上 自 定 义 文 件 , 本 项 目 还 需要 一 个 文件 夹 用 于 存放 背景 图 片 和 亮 宾 头像 图 
标 。 文 件 夹 名 称 由 开发 者 日 定义 (例如 images), 单 击 目 录 续 
构 左 上 角 的 十 号 创建 文件 夹 并 命名 为 images。 

本 项 目 用 到 的 背景 图 片 床 材 如 网 9-4 所 示 。 


”全 
右 击 目录 结构 中 的 images 文件 夹 ,选择 “硬盘 打开 ”, 然 | “人 全 人 
网。 做 信和 小 程序 名 


后 将 育 巡 图 片 文件 复制 ,粘贴 进 该 文件 夹 。 

本 项 目 用 到 的 雳 宾 头 像 图 片 隶 材 如 图 9-5 所 示 。 

右 击 目录 结构 中 的 images 文件 夹 , 选 择 “ 便 盘 打 开 ”, 然 
后 在 其 内 部 新 建 二 级 目录 avatar, 将 图 标 文 件 复 制 、. 粘贴 进 该 


目 采 ，。 图 9-4 背景 图 片 素材 展示 (素材 
完成 后 的 目录 结构 如 图 9-6 所 示 。 来 源 : 网 络 资源 ) 
本 项 目的 文件 配置 就 全 部 完成 ,9. 3 节 将 正式 进行 页 面 布 局 和 样式 设计 。 


二 总 


加 images 
avatar 
四 avatar1.jpg 
了 网 avatar2.jpg 
四 bannerjpg 
” [SS pages 
了 [SS index 
I9 indexjs 
{} indexjson 
<> Index Wwxmli 


usd Ndex Wass 


3 app.js 
{} app.json 
wr 玫 PD.WASS 
(a) avatarl .jpg (b) avatar2.]pg 人 project.config.json 
9-5 ”嘉宾 头像 素材 展示 (素材 来 源 : 网 络 资源 ) 图 9-6 页面 文件 创建 完成 


9.3.1 导航 栏 设计 


小 程序 默认 导航 栏 是 黑 底 日 字 的 效果 ,因此 需要 在 app. json 中 月 定义 导 
航 栏 标题 和 背景 颜色 。 更 改 后 的 app. json 文件 代码 如 下 : 


{ 
“pages : [ 
"pages/ index/ index" 
]， 
"window": { 
"navigationBarBackgroundColor”: " # 00B26A", 


Pe 


上 述 代 码 可 以 更 改 所 有 页 面 的 导航 栏 标题 文本 为 “会 
议 邀 请 困 ” 背 景 颜 色 为 绿色 (#00B26A)。 预 览 效 果 如 


9-7 自 定义 导航 栏 效果 图 9-7 所 示 。 


9.3.2 页 面 设计 
页 面 上 主要 以 垂直 滚动 的 形式 展示 会 议 的 各 种 内 容 , 设 计 图 如 图 9-8 


所 示 。 
具体 区 域 介 绍 如 下 。 
。 会 议 主题 : 包含 背景 图 片 .会 议 标 题 .主办 方 、 承 办 方 和 协办 方 信息 ; 
。 活动 衣 景 : 会 议 的 育 景 介绍 ,是 纯 文本 内 容 ; 
。 分 享 甩 宾 : 以 列表 的 形式 显示 闫 家 头 像 和 名 称 ; 
。 会 议 地 点 : 显示 会 议 的 时 间 、 地 点 和 地 图 查看 效果 。 
计划 使 用 如 下 组 件 。 
。 4 个 区 域 : 均 使 用 < view > 组 件 , 并 定义 class 一 'box'; 
。 每 个 区 域 的 标题 栏 : < view > 组 件 , 并 定义 class 三 
'title'; 
。 每 个 区 域 的 整体 内 容 : < view > 组 件 , 并 定义 class 一 
COontent ; 
。 每 个 区 域 的 文本 内 容 : < text > 组 件 ; 
”每 个 区 域 的 图 片 内 容 : < image > 组 件 ; 
。 分 享 雳 家 区 域 的 列表 : < view > 组 件 ,并 定义 class 一 
"bar 
。 会 议 地 点 区 域 的 地 图 和 “查看 详情 ?按钮 : < map > 组 
件 和 < button > 组 件 。 
整体 设计 9-8 ”页面 设计 图 


首先 定义 4 个 区 域 的 容 闫 (< view >)，WXML (pages/ 
index/index. wxml) 代 码 片 段 如 下 、 


1. <view class= 'box'> 

- <view class = 'title'> 会 议 主题 </view> 
CE <Vlew Class = 'content'> 

4. </view> 

5. </view> 

6. <view class = 'box'> 

7. <view class = 'title'> 活 动 背 景 </view> 
8. < Vilew Class = ‘content'> 

9 . </view> 

10. </view> 

11. <View class = 'box'> 

12. <view class = 'title'> 分 享 嘉 袜 </view> 
13. < VlIew class = Content > 


14. 
5 
16. 
17. 
18. 
19. 
20. 


</view> 
</view> 


< VLIew Class = 'box'> 
<view class = 'title'> 会 议 地 点 </view> 
< Vlew Class = Content > 
</view> 

</view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1 
2 
. 
4. 
i 
6 
7 
8 
9 


/x* 区 域 整体 样式 */ 

. box | 
border: 2rpx solid # 00B26A; /* 边框 x / 
color: 井 00B26R; /* 字体 颜色 x* / 
margin: 15rpx; /关外 边 距 关 / 
padding: 15rpx; /¥ 内 边 距 */ 

} 

/* 区 域 标题 样式 * / 

.title { 
font — size: 18Ppt; /* 字体 大 小 * / 
font — weight: bold; /* 字体 加 粗 */ 
padding — bottom: 10rpx; /¥ 底 端 内 边 距 * / 
border - bottom: 2rpx dashed 井 00B26R; /x 边框 x/ 

} 

. /* 区 域内 容 样 式 */ 

.Content { 
font — size: 12pt; /* 字体 大 小 */ 
margin: 10rpx 0; /* 外 边 距 上 下 10rpzx, 左 右 0*/ 
line ~ height: 80rpx; /* 行 间距 x / 


} 


当前 效果 如 图 9-9 所 示 。 


图 9-9 页 面 预 虎 效果 


由 图 可 见 , 目 前 4 个 区 域 有 了 统一 的 样式 效果 。 
会 议 主题 区 域 设计 

会 议 主题 区 域 需要 分 别 使 用 < image > 和 < text > 组 件 追 加 一 个 背景 图 片 和 一 段 纯 文本 描述 ， 
WXML(pages/index/index. wxml) 代 码 片 段 修改 如 下 : 

1 <View class= 'box'> 

二， < View class = 'title'> 会 议 主题 </view> 

3。 < image src = '/images/banner. jpg' style = 'width:100 和 "mode = 'widthFix'></image> 

4 < VlIeWw class= Content > 

5. < text > 全 国 高 校 微 信 小 程序 开发 与 实 训 课程 高 级 研修 班 \n 主办 方 : 教育 部 高 等 学 校 计算 机 
类 专业 教学 指导 委员 会 和 教育 部 高 等 学 校 软件 工程 专业 教学 指导 委员 会 \n 承办 方 : 集美 大 学 \n 协办 
方 : 腾讯 微 信 事业 群 和 清华 大 学 出 版 社 </text > 

6 . </view> 

7. </view> 


当前 效果 如 图 9-10 所 示 。 

活动 背景 区 域 设 计 

活动 背景 区 域 只 需要 使 用 < text > 组 件 追 加 一 段 纯 文本 内 容 即 可 。 
WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


1. <Vlew class = 'box'> 

w < View class = ' 汗 让 le'> 活 动 背 景 </view> 

呈请 < VlLew Class = “Content > 

4. < text > 2018 年 腾讯 全 球 合作 伙伴 大 会 上 ,官方 公布 了 一 组 数据 , 微 信 小 程序 用 户 量 已 经 达到 
2 亿 , 覆盖 行业 200 多 个 .这 一 数据 显示 微 信 小 程序 在 上 线 一 年 的 时 间 内 , 微 信 小 程序 用 户 确 实在 呈现 
指数 增长 . 正 是 基于 此 ,计划 举办 本 次 微 信 小 程序 系列 课程 教学 研讨 会 .</text > 

ps </ View> 

6. </view> 


当前 效 打 如 图 9-11 所 示 。 


集美 大 学 
; 肚 讯 项 信 事 业 群 和 清华 大 学 出 版 社 
© 活动 背景 
做 人 入 小 程序 :s \ 2018 年 腾讯 全 球 合作 伙伴 大 会 上 ,官方 公布 了 一 
| 组 数据 ， 棋 信 小 程序 用 户 旦 已 经 达到 2 亿 ， 蓝 痢 
行业 200 允 个 。 这 一 数据 昌 示 黎 信 小 程序 在 上 线 
一 年 的 时 间 内 ， 微 信 小 程序 用 户 确 实在 呈现 指数 


增长 。 正 是 基于 此 ， 计 划 举 办 本 次 柚 信 小 程序 系 
全 国 高 校 合 信 小 程序 开发 与 实 训 课程 高 级 研修 班 : 列 课程 教学 研讨 会 ， 


主办 方 ; 教育 部 高 等 学 校 计算 机 类 专业 教学 挡 导 
委员 会 和 教育 部 高 等 学 校 软件 工程 专业 教学 指导 
委员 会 


: 承办 方 ; 集美 大 学 


图 9-10 会议 主题 区 域 预览 效果 图 9-11 活动 育 景 区 域 预览 效果 


分 享 高 宾 区 域 设 计 
分 享 嘉 宾 区 域 用 来 显示 嘉宾 列表 ,列表 中 每 一 行 显示 一 位 嘉宾 的 头像 和 姓名 。 这 里 以 只 
有 一 位 嘉宾 为 例 , WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 


1. <view class= 'box'> 

w < View class = 'title'> 分 享 嘉 宾 </view> 

3 <Vlew class = Content > 

4. < vliew class= bar'> 

-由 < image class = 'avatar' src = '/ images/avatar/avatar1. jpg'></image > 
6. < text > 00 </text > 

7. </view> 

8. </view> 

9. </view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1， /x 分 享 嘉宾 区 域 : 列表 单元 行 样式 * / 

2. .bar { 

过 display: flex; / * flex 模型 布局 * / 
4. flex— direction: row; /x* 水 平 布局 */ 

5. align— items: center; /x< 垂 直方 问 居 中 对 齐 </ 
6 . font ~— size: 16pt; / ¥ 字体 大 小 * / 

7. } 

8. /x* 分享 嘉宾 区 域 : 头像 图 标 样式 </ 

9,. .avatar { 

10. width: 200rpx; /* 宫 度 */ 

11. height: 200rpx; / 关 融 度 关 / 

12. margin — right: 20TrPpx; /< 关 右 侧 外 边 距 <V 
13: 1} 


当前 效果 如 图 9-12 所 示 。 

如 果 喜 宾 人 数 较 多 ,可 以 在 逻辑 实现 环节 使 用 wx:for 属性 循环 展示 嘉宾 列表 。 

器 会 议 地 点 区 域 设 计 

会 议 地 点 区 域 主要 使 用 < text > 组 件 实现 会 议 的 时 间 与 地 点 文本 摘 述 、 使 用 < map > 组 件 
实现 地 图 预览 效果 以 及 使 用 < button > 组 件 实现 “查看 详情 ?按钮 , WXML (pages/index/ 
index. wxml) 代 码 片 段 如 下 : 


1. <View class= 'box'> 

F < View class = 'title'> 会 议 地 点 </view> 

了 < Vlew class = Content > 

4. < text>>2019 年 1 月 17 日 -1 月 20 日 :厦门 </text > 
5 < map></nap> 

6. < button > 查看 详情 </button> 

Ts </view> 

8. </view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 ， 


1. /x¥* 会 议 地 点 区 域 : 地 图 样式 */ 

2. map { 

3. width: 100%; /x* 宽度 x/ 
4. height: 400rpx; /* 高 度 */ 
5. } 

6. /x* 会 议 地 点 区 域 : 按钮 样式 */ 


由 图 可 见 , 当 前 地 图 组 件 显示 的 默认 地 点 在 北京 ,后 续 需 要 更 新 为 指定 的 地 理 位 置 。 


button { 
color: white.; /x* 字体 匣 色 x* / 
background - color: 井 00B26R; /x* 背景 颜色 * / 


LITTLE 


组 数据 ， 柚 信 小 程序 用 户 虽 口径 达到 2 亿 ， 重 蔷 
行业 200 合 个 。 这 一 数据 显示 和 侵 信 小 程序 在 上 续 
一 年 的 时 间 内 ， 繁 信 小 程序 用 户 确 实在 呈现 播 数 
增长 。 正 是 基于 此 ,计划 举办 本 次 仙 信 小 程序 系 
列 课程 教学 研讨 会 ， 


会 议 wb 点 
EE 地 点 


与 二话 


图 9-12 分 享 嘉 宾 区 域 预览 效果 图 9-13 ”会议 地 点 区 域 预览 效果 


此 时 页 面 设 计 就 全 部 完成 了 , 接 下 来 再 要 进行 逻辑 实现 。 


9.4.1 更 新 医 衬 列表 


在 分 享 嘉 室 区 域 对 < view class 王 'box' 忆 组件 添 加 wx:for 属性 ,改写 为 循 
环 展 示 列 表 。 
WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


I 


< View Class = 'box'> 
<view class = 'title'> 分 享 嘉 宾 </view> 
<Vvlew class = 'content'> 
< view Class = 'bar' wx:for= '{{guest}}' wx:key = 'guest{{index}}'> 
< image class = 'avatar' src = '{{iten. avatar} } '></image > 
< text >{{item. name}}</text > 
</view > 
</view> 
</view> 


然后 在 JS 文件 的 data 属性 中 追加 guest 数组 ,用 于 存放 嘉宾 个 人 信息 。 
JSCpages/index/index. js) 代 码 片 段 修 改 如 下 . 


1. Pagel{ 

2 / 关 凌 

3 * 页 面 的 初始 数据 

4. 3 

5 data: { 

6 guest: [{ 

7 avatar: '/images/avatar/avatar1. jpg', 
8. name:' 微 信和 事业 部 按 术 人 员 ' 

9. }, 

10. { 

11. avatar: '/images/avatar/avatar2. jpg', 
12. name: ' 周 文 洁 ' 

13. } 

14. ] 

15. } 

16. }) 


开发 者 可 以 目 行 更 改 堵 宾 的 人 数 .头像 和 和 名称。 运行 效果 如 图 9-14 所 示 。 


列 课程 教学 研讨 会 , 


分 享 嘉宾 
了 学 其 乓 


a 微 信 事 业 部 技术 人 员 


9-14 更 新 嘉宾 列表 效果 


由 图 可 见 , 当 前 已 经 可 以 展示 全 部 吉 宾 列表 信息 。 


9.4.2 时 新 地 图 位 置 


假设 会 议 地 点 在 集美 大 学 (坐标 : 24. 579805，118. 095086) ,修改 会 议 地 
点 区 域 的 < map > 组 件 ,为 其 追加 latitude 和 longitude 属性 。 
WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


<Vlew Class= “box > 
< View class = 'title'> 会 议 地 点 </view> 
< Vlew class = 'content'> 
<text>2019 年 1 月 17 日 -1 月 20 日 :厦门 </text> 
< map latitude = '{{1lat}}' longitude = '{{1lon}}'></map> 
< button > 查看 详情 </button > 
</View> 
</view> 


在 JS 文件 的 data 属性 中 添加 坐标 数据 ,JS(pages/index/index. js) 代 码 片 段 如 下 : 


o am 必 wwN 


1. Page({ 

2. / x 

3. * 页 面 的 初始 数据 
4. 关 1 

data: { 

6. lat: 24.579805, 
Ts lon: 118.095086, 
8. guest :| … ] 

9. } 

10. }) 

运行 效果 如 图 9-15 所 示 。 


避 pe 
SY 


2019 年 1 月 17 日 -1 月 20 日 -厦门 


J 


站 
加 
二 


图 9-15 更 新 地 图 位 置 效 果 
由 图 可 见 ,当前 已 经 可 以 展示 集美 大 学 附近 的 地 图 信息 了 。 
9.4.3 ”查看 地 图 详情 


当 用 户 点 击 会 议 地 点 区 域 的 “查看 详情 ?按钮 时 可 以 打开 全 屏 地 图 进行 查 
看 ,在 真 机 中 还 可 以 进行 导航 、 定 位 和 街景 显示 。 


如 下 


为 <button > 组 件 添 加 bindtap 事件 ,WXML(pages/index/index. wxml) 代 码 片 段 修改 


1. <view class = 'box'> 

之 。 < View class = 'title'> 会 议 地 点 </view> 

3. < VlIew Class= Content > 

4 . <text>2019 年 1 月 17 日 -1 月 20 日 :厦门 </text > 

5., <map latitude = '{{lat}}' longitude = '{{lon}}'></map > 
6. < button bindtap = 'showGuide'> 查 看 详情 </button > 

17. </view> 

8. </view> 


在 JS 文件 中 添加 自 定 义 图 数 showGuide,JS(pages/index/index. js) 代 码 片 段 如 下 . 


1. Page({ 

和 / 尖 兴 

$ * 查看 位 置 

4. x*/ 

< showGuide: function() { 
6. var that = this 

7. Wx. openLocation( | 

8. latitude: that. data. ] at， 
9. longitude: that. data. lon, 


12. }) 
真 机 运行 效果 如 图 9-16 所 示 。 


时 SihE 卡 让 柱 [| 国 下 午 5:20 @ -2% 


< 乐 实 小 学 
SEE 
乐 安 中 学 登 


微 信 事业 部 技术 人员 


| 过! 和 时 本 和 时 和 可 踢 


2019 年 1 月 17 日 -1 月 20 日 :厦门 


(a) 页 面 切 怒 并 霖 (b) 全 屏 合 看 地 图 评 信 
9-16 ” 真 机 预览 效果 


显示 路 绪 


街景 


总 腾讯 地 图 


(c) 点 击 右 下 和 角 按钮 的 菜单 效果 (d) 切换 街景 模式 


王 午 5:2 妇 和 焦 美 永恒 YE 向 站 92% 重量) 


国 PEE Tt 


大 唐 世 罕 
@ 
着 门市 第 二 四 


站 
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QO 
| 第 美 中 心 在 园 


O 银 广 跑 
海量 文 创 空间 


全 


推荐 
12 小 时 43 分 12 小 时 56 分 


11 人 .号 公里 1012.3 从 里 


过 路 髓 的 505 元 。 虹 绿灯 个 


(e) 显示 建议 路 线 (了 ) 焉 竺 高 德 地 图 导 肝 
图 9-16 〈 续 ) 


需要 注意 的 是 ,如 果 用 户 手机 中 尚未 安装 第 三 方 地 图 App, 则 只 能 跳 转 到 应 用 商店 进行 
下 载 。 

此 时 会 议 邀 请 函 小 程序 就 全 部 完成 了 ,开发 者 可 以 根据 实际 需要 更 换 邀 请 函 的 主题 颜色 、 
布局 和 内 容 。 


app. json 文件 的 完整 代码 如 下 : 


oaDmhwn 呈 


{ 
“pages : [ 
"pages/ index/ index" 
I 
Window : { 
"navigationBarBackgroundColor": "#00B26A", 
"navigationBarTitleText": "会 议 邀 请 国 " 
} 
| 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


让 


(nn 


< View class = 'box'> 
< View class = 'title'> 会 议 主 题 </view> 
< image src = '/images/banner. jpg' style= 'width:100 % 'mode = 'widthFix'></image> 
< Vlew Class= Content > 


< text > 全 国 局 校 微 信 小 程序 开发 与 实 训 课程 蜗 级 研修 班 \n 主办 方 : 教育 部 局 等 学 校 计 算 机 


类 专业 教学 指导 委员 会 和 教育 部 局 等 学 校 软件 工程 专业 教学 指 守 委员 会 \n 承办 方 : 集美 大 学 \n 协办 
方 : 腾讯 微 信和 事业 群 和 清华 大 学 出 版 社 </text > 


6 . 
可 
8. 
a 


10. 
11, 


</view> 

</ View> 

<Vlew Class = 'box'> 
<view class = 'title'> 活 动 背 景 </view> 
<Viliew class= Content > 


< text > 2018 年 腾讯 全 球 合作 伙伴 大 会 上 ,官方 公布 了 一 组 数据 , 微 信 小 程序 用 户 量 已 经 达到 


2 亿 , 履 瘟 行业 200 多 个 .这 一 数据 显示 币 信 小 程序 在 上 线 一 年 的 时 间 内 , 币 信 小 程序 用 户 确 实在 呈现 
指数 增长 . 正 是 基于 此 ,计划 举办 本 次 微 信 小 程序 系列 评 程 教学 研讨 会 .</text > 


12. 
13; 
14. 
9. 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
23. 
24. 
25. 
26. 
27. 
28. 
29. 
30. 


</view> 
</view> 
<View class= 'box'> 
<View class = 'title'> 人 分享 襄 宾 </view> 
< Viliew class = Content > 
<View class = 'bar' wx:for= '{{guest}}'wx:key= 'guest{{index}}'> 
< image class = 'avatar' src = '{{itenm. avatar}}' mode = 'widthFix'></image > 
< text >{{item. name} }</text > 
</vView > 
</View> 
</View> 
<Vlew class= 'box'> 
<View class = 'title'> 会 议 地 点 </view> 
< Vliew class = Content > 
<text>2019 年 1 月 17 日 -1 月 20 日 :厦门 </text > 
<map latitude = '{{lat}}' longitude = '{{lon}}'></map > 
< button bindtap = 'showGuide'> 查 看 详情 </button > 
</view> 
</view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 ， 


3， 


/* 区 域 整体 样式 * / 


2. .box { 

3. border: 2rpx solid # 00B26A.; 
4. color: #00B26A; 

2 margin: 15rpx; 

6. padding: 15rpx; 

7. } 

8. /x* 区 域 标题 样式 x* / 

9. .title { 

10. font — size: 18pt; 

11, font — weight: bold; 

12. padding — bottom: 10rpx; 

13. border— bottom: 2rpx dashed # 00B26A; 
14. } 

15. /x* 区 域内 容 样式 */ 

16. .content { 

17. font 一 size: 12pt; 

18. margin: 10rpx 0; 

19. line ~ height: 80rpx; 

20. | 

21. /* 分 享 嘉 宾 区 域 : 列表 单元 行 样式 */ 
22. .bar { 

3, display: flex; 

24 flex— direction: row; 

2 align— items: center; 

26. font 一 Size: l6pt.; 

27，} 

28. /* 分 享 嘉宾 区 域 : 头像 图 标 样式 */ 
29. ,avatar { 

30. width: 200rpx:; 

31 height: 200TrPX; 

了 之、 margin — right: 20rpx; 

33. } 

34. /* 会 议 地 点 区 域 : 地 图 样式 */ 
35. map { 


36. width: 100%. 

37. height: 400TrPX; 

38. |] 

39. /* 会 议 地 点 区 域 : 按钮 样式 */ 
40. button { 

41. color: white; 

42. background— color: #00B262A; 
43. } 


/* 边框 x / 

/* 字体 颜色 x / 
/关外 边 距 关 7 
/* 内 边 距 x / 


/x* 字体 大 小 x* / 
/¥* 字体 加 粗 x*/ 
/* 底 端 内 边 距 x* / 
/x* 边框 */ 


/* 字体 大 小 x* / 
/x* 外 边 距 上 下 10rpx, 左 右 0*/ 
/* 行 间距 x*/ 


/x* flex 模型 布局 */ 

/¥* 水平 布 局 * / 

/* 垂下 方 回 居中 对 齐 */ 
/* 字体 大 小 */ 


/*< 宽 度 </ 
/* 局 度 x*/ 
/* 夸 侧 外 边 距 * / 


/* 字体 颜色 */ 
/* 到 丸 颜色 * / 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


1. Pagel({ 

7 / xx 

3 * 页 面 的 初始 数据 

4. x*x/ 

5. data: { 

6 lat: 24.579805, 

7 lon: 118.095086, 

8 guest: [1{ 

9 avatar: '/images/avatar/avatarl. jpg'"， 


10. nane: , 微 信 事 业 部 技术 人 员 ， 
11. | 


12， 
是 
14. 
是 
16， 
17, 
18. 
19. 
20. 
21. 
区 
:多国 
24. 
25 
260 . 
dT 
28. 


{ 


avatar: '/images/avatar/avatar2. jpg', 


name: ' 周 次 洁 ' 


] 
}, 
/ 尖 基 
x 查看 位 置 
关 / 
showGuide: function() { 
var that = this 
wx. openLocationl( { 
latitude: that. data. lat, 
longitude: that. data. lon, 
}) 
}, 


小 程序 设备 AP . 指南 针 


本 章 主 要 使 用 小 程序 设备 API 的 相关 知识 制作 一 款 指南 针 小 程序 。 
本 章 学 习 目 标 
。 理解 经 纬度 坐标 的 含义 ; 
。 了 解 坐 标 类 别 wgs84 和 gcj02 的 区 别 ; 
。 使 用 设备 API 制作 指南 针 小 程序 。 


本 项 目 创建 选择 空 魏 文件 夹 compassDemo ,效果 如 图 10-1 所 示 。 eh TE 
单 击 “新 建 ? 按 钮 完成 项 目 创建 ,然后 准备 手动 创建 页 面 配置 文件 。 视频 讲解 


车 无 AppiD 可 注册 
或 使 用 测试 号 


图 10-1 小 程序 项 目 填 写 效 果 示 意图 


10.2.1 创建 页 和 面 文件 


项 目 创建 完毕 后 ,在 根 目录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 笑语 和 尖 让 
一 般 来 说 首页 默认 命名 为 Index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 le 证 


称 可 以 自 定义 。 本 项 目 只 需要 保留 首页 (index) 即 可 。 饮 频 讲解 
具体 操作 如 下 : 


(1) 将 app.json 文件 内 pages 属性 中 的 “pages/logs/logs ”删除 ,并 删除 上 一 行 末 尾 的 
逗号 。 


(2) 按 快捷 键 Ctrl 十 S 保存 当前 修改 。 
10.2.2 删除 和 修改 文件 


具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 日 
动 补 全 图 数 ( 如 图 10-2 所 示 )。 


di 


index .js 者 


1 iindex .js 
2 page 
[lad y 
tunction OD 
ra 
TD BetCurrentpages 
全 > package 
pp pauseBackgroundAudio 
PP previewImage 
~ canvasPutImageData 


图 10-2 输入 关键 词 创建 Page 函数 
(5) 删除 app. wxss 中 的 全 部 代码 。 


(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 计 其 自动 
补 全 函数 (如 图 10-3 所 示 ) 。 


Function 1 
Spp 


[站 getApp 


10-3 输入 关键 词 创建 App 函数 


10.2.3 创建 其 他 文件 


接 下 来 创建 其 他 自 定义 文件 ,本 项 目 还 需要 一 个 文件 夹 用 于 存放 指南 针 图 片 (compass. 
jpg)。 文 件 夹 名 称 由 开发 者 自 定 义 ( 例 如 images), 单 击 目 录 结 构 左 上 角 的 十 号 创建 文件 夹 并 
命名 为 images。 

本 项 目 用 到 的 背景 图 片 双 材 如 图 10-4 所 示 。 

右 击 目录 结构 中 的 images 文件 夹 ,选择 “硬盘 打开 ,然后 将 指南 针 图 片 文件 复制 .粘贴 进 

全 部 完成 后 的 目录 结构 如 图 10-5 所 示 。 


+ Q 


" [SS images 


compass .jpg 
v [GS pages 
SS index 
] index js 
{} indexjson 
> indexwxml 
ws INdex. Wxss 
3 app.js 
{ } app.json 


ws DD.WASS 


{s project.config.json 


图 10-4 指南针 图 片 素材 展示 (素材 来 源 : 网 络 资源 ) 10-5 页面 文件 创建 完成 


本 项 目的 文件 配置 就 全 部 完成 ,10. 3 节 将 正式 进行 页 面 布 局 和 样式 设计 。 


小 程序 默认 导航 栏 是 黑 底 白字 的 效果 ,因此 需要 在 app. json 中 目 定 义 导 
航 栏 标题 和 背景 颜色 。 更 改 后 的 app. json 文件 代码 如 下 : 

1. 1{ 

o "pages" [ 

3. "pages/ index/ index" 

4. ] ， 

= "window : { 

6. "navigationBarBackgroundColor": " 妆 A46248"，, 

7. "navigationBarTitleText": "我 的 指南 针 " 

8. } 

9. } 


上 述 代 码 可 以 更 改 所 有 页 面 的 导航 栏 标题 文本 为 “我 
的 指南 针 ”, 背景 颜色 为 柠 色 (# A46248)。 预 览 效 果 如 
图 10-6 所 示 。 10-6 ” 自 定义 导航 栏 效 果 


图 10-7 所 示 。 


index/index. wxml) 人 代码 片段 如 下 : 


10.3.2 页 面 设计 二 

页 面 上 主要 以 垂直 居中 的 形式 展示 指南 针 图 片 和 状态 文字 ,设计 图 如 记 和 下 沁 

视频 讲解 

具体 区 域 介 绍 如 下 。 

。 图 片区 域 : 可 旋转 的 指南 针 图 片 ; 

。 文字 区 域 : 包括 当前 方 品 角度 经 纬度 和 海拔 数据 。 

计划 使 用 如 下 组 件 。 

。 整体 区 域 : < view > 组 件 , 并 和 定义 class 一 'container ' ; 

*。 图 上 乒 区域 : < image > 组 件 ; 

。 文字 区 域 : < view > 组 件 ,并 定义 class 一 'status '; 

。 区 域内 的 文本 内 容 : 共 3 行内 容 , 均 使 用 < text > 
组 件 。 


站 南 针 图 片 


整体 设计 
首先 定义 整体 区 域 的 容器 (< view >), WXML (pages/ 0。 南 


北纬 0.00 东经 0.00 
2. </view> 海拔 0.00 米 
WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1]. <view class = ‘container'> 


1. /x* 容器 整体 样式 x*/ 图 10-7 页面 设计 图 
2 .Containerl{ 

3 height: 100vh; /<* 目 适应 手机 屏幕 局 度 */ 

4 . displav: flex; /* flex 布局 模型 * / 

i flex— direction: column; /* 和 王 直 布局 */ 

6 align— items: center; /* 水 平方 器 居 中 */ 

7 Justify— content: space — around; /* 调整 间 际 */ 

8 color: #A46248; /* 字体 颜色 */ 

- 


此 时 容 需 中 尚未 添加 具体 内 容 , 因 此 暂时 无 视图 的 变化 效果 。 

图 片区 域 设 计 

图 片区 域 需 要 使 用 < Image > 组 件 添 加 指南 针 图 片 (compass. ]Dg) 。 
WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 

1. <view class= Contalner > 


。 < image src = '/images/compass. jpg' mode = 'widthFix'></image > 
3. </view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x 图 片区 域 样式 x*/ 

2. imagel 

3. width: 80%; /* 宽度 x |/ 
4. } 


当前 效 打 如 图 10-8 所 示 。 


文字 区 域 设 计 
文字 区 域 需要 使 用 一 个 < view > 组 件 包含 3 个 < text > 组 件 来 完成 。 
WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


1. 
2. 


8. 


< Vliew Class = ‘container'> 


< image src = '/images/compass. jpg' mode = 'widthFix'></ image > 


< view class= 'status'> 


< text class = 'bigTxt'> 0 南 </text > 
< text class = 'smallTxt '> 北 纬 0.00 东经 0.00 </text> 
< text class = 'smallTxt'> 海 拔 0.00 米 </text > 


</view> 


</view> 


WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x* 文字 区 域 整体 样式 x / 
2. .statustf 

s display: flex; 

4. flex— direction: column; 
5. align ~ items: center; 
6. | 

7. /x* 大 号 字 */ 

8. .bigTxt{ 

9. font — size: 30pt; 

10. margin: 15rpx; 

11. | 

12. /* 小 号 字 */ 

13. .smallTxt{ 

lid. font 一 size: 20pt; 

了 margin: 15rpx; 

16. } 


当前 效果 如 图 10-9 所 示 。 


TTT 


10-8 图 片区 域 预 虎 效果 


/x* flex 布局 模型 */ 
/* 王 耻 布局 */ 
/ * 水 平方 向 居中 * / 


/x* 字体 大 小 */ 


/* 外 边 距 x*/ 


/x* 字体 大 小 */ 


/* 外 边 距 x / 


向量 量 者 者 导 Bes hat = 


北纬 0.00 东经 0.00 
海拔 0.00 米 


10-9 ”文字 区 域 预览 效果 


此 时 页 面 设计 就 全 部 完成 了 , 接 下 来 需要 进行 逻辑 实现 。 


10.4.1 指责 夺 诞 转 动画 


修改 <image > 组 件 ,使 用 行内 样式 style 属性 为 其 添加 旋转 特效 。 
WXML(pages/index/index. wxml) 代 码 片 段 修 改 如 下 : 


1. <Vlew class = Contalner > 
2. < image src = '/images/compass. jpg' mode = 'widthFix' style = 'transform: rotate({{rotate}} 
deg); '></image > 


3 < Vlew class= 'status'> 

4. < text class = 'bigTxt'> 0 南 </text > 

<text class = 'smallTxt'> 北 纬 0.00 东经 0.00 </text > 
6 < text class = 'smallTxt'> 海 拔 0.00 米 </text > 

本 </view> 

8. </view> 


上 述 代 码 中 的 transform:rotate() 来 源 于 CSS3 技术 ,用 于 将 图 片 旋转 指定 角度 。 例 如 
transform:rotate(30deg) 指 的 是 将 图 片 顺 时 和 针 旋 转 30”。 

在 JS 文件 的 data 属性 中 添加 rotate 变量 用 于 存放 旋转 角度 。 

JS(pages/index/index. js) 代 码 斤 段 修 改 如 下 : 


1. Page({ 

2 / x 

3 *x 页 面 的 初始 数据 

4. x*x/ 

Ds data: { 

6 rotate: 0 

7 1, 

8. 1) 

开发 者 可 以 临时 更 改 旋转 角度 查看 图 片 旋转 效果 。 
然后 在 JS 文件 的 onLoad 函数 中 监听 指南 针 的 角度 变化 。 
JS(pages/index/index. js) 代 但 片段 修改 如 下 ; 


1. Page({ 

7 / xx 

3 * 生命 周期 靖 数 -一 监听 页 面 加 载 

4. x/ 

5 . onLoad: function(options) { 

6 var that = this; 

// 监 听 指 南 针 角度 

8. Wx. oNnCompassChange(function(res) { 
9. // 获 取 度 数 

10. let degree = res. direction. toFixed(0) 
11. that. setDatal { 

12. // 计 算 应 偏 移 上 度数 

13. rotate: 360 — degree 


14. }) 
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图 10-10 ”指南 针 图 片 旋转 效果 
由 图 可 见 , 当 前 已 经 可 以 使 用 图 片 显示 指南 针 效 果 。 


10.4.2 更 新 戎 度 和 方 癌 信息 


由 于 文字 信息 应 该 根据 手机 设备 的 位 置 不 断 变化 ,所 以 修改 < text > 组 件 关 所 
的 内 容 , 将 角度 和 方向 信息 更 新 为 双 花 括号 描述 方式 : 


WXML(pages/index/index. wxml) 代 人 码 片 段 修改 如 下 .、 倪 频 讲解 
1. <vView class = 'container'> 

2. < image src = '/images/compass. jpg' mode = 'widthFix'></ image > 

a <Vlew Class= Status > 

4. < text class = 'bigTxt'>{{degree}} {{direction}}</text > 

5 . <text class = 'smallTxt'> 北 纬 0.00 东经 0.00 </text > 

6 . < text class = 'smallTxt'> 海 拔 0.00 米 </text > 

7. </view> 

8. </view> 


在 JS 文件 的 data 属性 中 添加 相关 变量 用 于 存放 角度 和 方 问 。 
JS(pages/index/index. js) 代 码 片 段 修改 如 下 .: 


1, 
FP 
: 
4. 
J 
6 . 
Li 
8. 
9 . 


> 
La 


然后 在 JS 文件 中 添加 自 定义 函数 getDirection, 用 于 更 新 角度 和 方向 的 文字 描述 ,JS 


Page({ 
/ xx 
x 页面 的 初始 数据 
data: 1 
rotate: 0, 
degree: ' 未 知 '， 
direction: '" 
}, 
}) 


(pages/index/index. js) 代 码 片 段 如 下 : 


1 
2 
3 
4. 
- 
6 
7 
8 
9 


10. 
11. 
12. 
3 
14. 
15. 
16. 
17. 
19. 
19. 
20. 
21. 
das 
23. 
24. 
25. 
20 . 
a 
28. 
29. 
30. 


修改 onLoad 函数 中 的 指南 针 角 度 监 听 内 容 ,JS(pages/index/index. js) 代 码 片 段 如 下 : 


tn 


Pagel { 
/ xx 
x 判断 方向 
x/ 
getDirection: function(deg) { 
let dir = ' 未 知 ' 
if (deg >= 340 || deg <= 20) { 
dir = " 北 ' 
} else if (deg > 20 && deg < 70) { 
dir = "东北 
} else if (deg >= 70 && deg <= 110) { 
dir = ' 东 ' 
} else if (deg > 110 && deg < 160) { 
dir = ' 东 了 南 ' 
} else if (deg >= 160 && deg <= 200) { 
dir = ' 南 ' 
} else if (deg > 200 && deg < 250) { 
dir = ' 西 南 ， 
} else if (deg >= 250 && deg <= 290) { 
dir = ' 相 " 
} else if (deg > 290 && deg < 340) { 
dir = "西北 ' 


} 

// 里 新 角度 和 方 问 

this. setDatal { 
degree: deg, 
direction: dir 

}) 

}, 
}) 


Pagel { 
/ x 
< 和 牛 命 周期 函数 -一 监听 页 面 加 载 
x / 
onLoad: function(options) { 


Var that = 七 h1s， 

// 监 听 指 丙 针 角度 

Wx. oNnCompassChange(function(res) { 
// 获 取 度 数 
let degree = res. direction. toFixed(0) 


LE: // 更 新 方向 描述 


12. that. getDirection( degree) 
13. that. setDatal { 

14. // 计 算 应 偏 移 度数 

15, rotate: 360 — degree 

16. }) 

17. }) 

18. 了 

19. }) 


真 机 预览 效果 如 图 10-11 所 示 。 
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10-11 更 新 角度 和 方向 信息 效果 
由 图 可 见 ,当前 文字 区 域 的 第 一 行内 容 已 经 可 以 随 着 图 片 的 旋转 同步 更 新 了 。 
10.4.3 更 新 地 理 位 置信 息 


二 和合 这 让 
由 于 地 理 位 置信 息 (经 纬度 和 海拔 ) 也 应 该 根据 手机 设备 的 位 置 不 断 变化 ， 局 赔 受 菇 
所 以 修改 < text > 组 件 的 内 容 , 将 相关 信息 更 新 为 双 花 括号 描述 方式 。 
WXML(pages/index/index. Wxml) 代 人 码 片 段 修改 如 下 : 饮 频 讲解 


<Vlew class = ‘container'> 
< image src = '/ images/compass. jpg' mode = "widthFix"></ image > 
<Vlew Class= Status > 
< text class = 'bigTxt'>{{degree}} {{direction} }</text > 
< text class = 'smallTxt'> 北 纬 {{1lat}} 东 经 {{lon}}</text> 
< text class = 'smallTxt '> 海 拔 {{alt}} 米 </text > 
</view> 
</view> 


在 JS 文件 的 data 属性 中 添加 相关 变量 用 于 存放 经 纬度 和 海拔 高 度 。 
JS(pages/index/index. js) 代 码 片 段 修改 如 下 : 


1 
2. 
R 
4. 
pe 
6 . 
8. 


1. Pagel(l{ 

2 / x 

3 * 页 面 的 初始 数据 
4. 关 / 

data: { 

6 rotate: 0, 

了 degree: 未知 '， 
8 

9 


direction: ”， 
lat: 0， 
10. lon: 0， 
11. alt: 0 
12. }, 
13. 月 


在 JS 文件 的 onLoad 函数 中 获取 地 理 位 置信 息 ,JS(pages/index/index. js) 代 码 片 段 
如 下 : 


1. Pagel(lf{ 

2 / ¥x 

3. * 和 牛 命 周期 函数 -一 监 昕 页面 加 载 

4. x*x/ 

3 onLoad: function(options) { 

6. var that = this; 

// 获 取 地 理 位 置 

8. wx. getLocation( { 

9. altitude:true, 

10. success: function(res) { 

11. that. setDatal( { 

12. lat: res. latitude. toFixed(2), 
13. lon: res. longitude. toFixed(2), 
14. alt: res.altitude. toFixed(2) 
15. }) 

16. }, 

Ly, }) 

18. // 监 听 指 南 针 角度 

19. wx. onCompassChange(function(res) 1 
20. // 代 码 略 

21. }) 

2 be 

23. 上 


需要 注意 的 是 ,腾讯 更 新 了 小 程序 的 许可 权限 ,还 需要 在 app. json 文件 中 追加 以 下 配置 
内 容 方 可 获取 用 户 地 理 位 置信 息 。 


app. json 文件 代码 片段 如 下 : 


1， 1 

2. "pages" : [… 代 码 略 … ]， 

3 "window" : {… 代码 略 … }， 

4. “Permission : { 

5. "scope. userLocation": { 

6. "desc" :" 你 的 位 置信 息 将 用 于 小 程序 指南 针 的 效果 展示 " 
7. } 

8. }， 

9. 


} 
真 机 预览 效果 如 图 10-12 所 示 。 
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10-12 更 新 地 理 位 置信 息 效 果 


由 图 可 见 , 当 前 文字 区 域 的 全 部 内 容 均 可 以 随 着 手机 设备 的 移动 同步 更 新 了 。 
此 时 指南 针 小 程序 就 全 部 完成 了 ,开发 者 可 以 自行 更 换 指 南 针 的 图 片 和 样式 主题 。 


app. json 文件 的 完整 代码 如 下 : 


1 
7 "pages” : [ 

让 "pages/ index/ index" 
4 


.} 


TT window" : { 
"navigationBarBackgroundColor": "#A46248", 
"navigationBarTitleText":" 我 的 指南 针 ” 


}， 
“Permission : { 
"scope. userLocation™": { 


"desc" :" 你 的 位 置信 息 将 用 于 小 程序 指南 针 的 效果 展示 " 


} 
}, 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


1 
. 


<Vlew class = 'container'> 


< image src = '/images/compass. jpg' mode = 'widthFix' style = 'transform: rotate( {{rotate}} 


deg) ; '></image > 


3 
4. 
Ds 
6 
7 
8 


< Vlew Class = Status > 


< text class = 'bigTxt'>{{degree}} {{direction} }</text > 
<text class = 'smallTxt > 北纬 {{1lat}} 东经 {{lon}}</text > 
<text class = 'smallTxt'> 海 拔 {{alt}} 米 </text > 


</view> 


</view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


] 
2 
3 
4. 
3 
6 
7 
8 
9 


10. 
11. 
12. 
13. 
14. 
15. 
16. 
va 
18. 
19. 
20. 
24 
， .bigTxt{ 


/* 容器 整体 样式 x* / 


. Containerl{ 


} 


height: 100vh; 

display: flex; 

flex— direction: column; 

align ~ items: center; 

Justify— content: Space ~ around; 
color: # A46248; 


/x 图 片区 域 样式 x / 


imagel 


} 


width: 80%.; 


/ * 文字 区 域 整体 样式 */ 


. Statust 


} 


display: flex; 
flex— direction: column; 


align— items: center; 


/ * 大 号 字 * / 


-4 
. /#* 小 号 字 */ 
. .SmallTxt{ 


，} 


font — size: 30Ppt; 
margin: 15rpx; 


font 一 size: 20pt; 
margin: 15rpx; 


/* 目 适应 手机 屏幕 高 度 */ 
/x* flex 布局 模型 x* |/ 

/* 王 耳 布 局 */ 

/* 水 平方 向 居中 */ 

/* 调整 则 际 */ 

/x 字体 颜色 */ 


/* 加 度 */ 


/* flex 布局 模型 * |/ 
/* 垂直 布局 */ 
/* 水 平方 品 居 中 */ 


/x 字体 大 小 x*/ 
/x* 外边 距 */ 


/* 字体 大 小 */ 
/* 外 边 距 x*/ 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 ， 


二 
本 
了 
4 . 
6 . 
1 
8. 
9. 


卢 捕 
> 


Pagel { 


* 页 面 的 初始 数据 
*/ 


data: { 


} 


/ 


rotate: 0, 
degree: ' 未 知 '， 
direction: ”， 
lat: 0， 

lon: 0 

alt: 0 


区 
美美 


< 判断 方 回 
x/ 


getDirection: function(deg) 1{ 


let dir = ' 未 知 ' 

if (deg >= 340 || deg <= 20) { 
di 二 

} else if (deg > 20 && deg < 70) { 
dir = ' 东 北 " 

} else if (deg >= 70 && deg <= 110) { 
dir = ' 东 ' 

} else if (deg > 110 && deg < 160) { 
dir = ' 东 了 羡 ' 

} else if (deg >= 160 && deg <= 200) { 
dir = “' 南 ， 

} else if (deg > 200 && deg < 250) { 
dir = ' 西 南 ， 

} else if (deg >= 250 && deg <= 290) { 
dir = "四" 

} else if (deg > 290 && deg < 340) { 
dir = ' 西 北 ' 

} 

// 更 新 角度 和 方 回 

this. setDatal { 
degree: deg, 
direction: dir 


}) 


}, 
/ ¥¥ 


* 生命 周期 函数 -监听 页 面 加 载 
*/ 


onLoad: function(options) { 


var that = this; 
// 获 取 地 理 位 置 
wx. getLocation({ 
success: function(res) { 
that. setDatal { 
lat: res. latitude. toFixed(2), 
lon: res. longitude. toF ixed{ 2), 
alt: res.,altitude. toFixed(2) 
}) 
}, 


}) 
56. // 监 听 指 南 针 角度 


57. wx. onCompassChange( function(res) { 
58. // 获 取 度 数 

59 . let degree = res. direction. toFixed(0) 
60. // 时 新 方 回 描 述 

61. that. getDirection( degree) 

62. that. setDatal { 

63. // 计 算 应 偏 移 上 度数 

64. rotate: 360 一 degree 

65. }) 

66. }) 

67. }, 
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本 草 主 要 使 用 小 程序 界面 API 中 绘图 的 相关 知识 制作 一 款 手绘 时 钟 小 程序 。 


本 章 池 习 目 标 


。 掌握 和 画布 组 件 (< canvas >) 的 基础 用 法 ; 
。 掌握 绘制 和 矩形、 路 径 和 文本 的 方法 ; 


。 掌握 颜色 与 样式 的 设置 方法 ; 
。 掌握 setInterval 函数 的 用 法 ,设置 每 秒 刷新 画面 。 


本 项 目 创建 选择 空 月 文件 夹 clockDemo ,效果 如 图 11-1 所 示 。 下 
单 击 “ 新 建 ” 按 钮 完成 项 目 创建 ,然后 准备 手动 修改 页 面 配置 文件 。 视频 讲解 


车 无 AppiD 可 注册 
或 使 用 测试 号 


图 11-1 小 程序 项 目 填写 效果 示意 图 
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11.2.1 创建 页 和 面 文件 


项 目 创建 完毕 后 ,在 根 目录 中 会 生成 文件 夹 pages pi i 
一 般 来 说 首页 默认 命名 为 index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 OD rT 


称 可 以 自 定义 。 本 项 目 只 需要 首页 (index) 即 可 ， 说 顷 讲解 
具体 操作 如 下 : 


(1) 将 app. json 文件 内 pages 属性 中 的 “pages/logs/ylogs” 删 除 ,并 删除 上 一 行 末 尾 的 逗号 。 
(2) 按 快 捷 键 Ctrl 十 $ 保存 当前 修改 。 


11.2.2 删除 和 修改 文件 


具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index.js 中 的 全 部 代码 ,并且 输入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 月 
动 补 全 图 数 ( 如 图 11-2 所 示 )。 


index.js 村 


1 Inmdex。 了 了 Ss 
2 paeEe 


Cp ee function O 


EetCurrentpages 

三 > package 

pp pauseBackgroundAudio 
PP previewImage 

~ canvasPutImageData 


11-2 输入 关键 词 创建 Page 函数 
(5) 删除 app. wxss 中 的 全 部 代码 。 
(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 日 动 
补 全 辑 数 (如 图 11-3 所 示 )。 


app.|S 举 
1 fapp .js 
Da 


function 和 


人 getApp 


11-3 输入 关键 词 创建 App 函数 


本 项 目的 文件 配置 就 全 部 完成 ,11.3 书 将 正式 进行 页 面 布局 和 样式 设计 。 
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11.3.1 导航 栏 设计 


导航 栏 标题 。 


的 时 钟 ”。 


11.3.2 页 面议 计 


小 程序 默认 导航 栏 是 黑 底 白字 的 效果 ,因此 只 需要 在 app. json 中 自 定 义 


更 改 后 的 app. json 文件 代码 如 下 : 


{ 
"pages": [ 
"pages/ index/ index" 
] ， 
"window : { 
"navigationBarTitleText": "我 的 时 钟 " 
} 
} 


上 述 代码 可 以 更 改 所 有 页 面 的 导航 栏 标题 文本 为 “我 


DIDM 人 NP 


预览 效果 如 图 11-4 所 示 。 


页 面 上 主要 以 年 直 居中 的 形式 展示 标题 .手绘 时 钟 和 数字 电子 时 钟 ,设计 强 莒 时评 这 
图 如 图 11-5 所 示 。 lp = 
具体 区 域 介绍 如 下 。 视频 讲解 


。 国 | 布 区 域 : 手绘 时 钟 ; 

*。 文字 区 域 : 标题 和 数字 电子 时 钟 。 

计划 使 用 如 下 组 件 。 

。 整体 区 域 : < view > 组 件 ,并 定义 class 王 'container '; 
。 手绘 时 钟 区 域 : < canvas > 组 件 ; 

。 数字 电子 时 钟 区 域 : < text > 组 件 。 

整体 设计 

首先 定义 整体 区 域 的 容器 (< view >),WXML(pages/index/index. wxml) 代 码 片 段 如 下 


1. <Vlew class = 'container'> 
2, </view> 


WXSS(pages/index/index. wxss) 代 人 码 上 请 段 如 下 : 


1. /* 整体 容器 样式 * / 

2 . Container! 

本 height: 100vh; /* 高 度 */ 

4. display: flex; / * flex 布局 模型 * / 
5. flex— direction: column; /* 王 和 下 布局 */ 

6 align— items: center.; /x* 水 平方 向 居中 */ 
1 Justify— content: Space — around; /* 调整 内 容 间 际 * / 
| 


桨 CO 第 11 章 小 程序 界面 AP1 . 手绘 时 钟 


此 时 容 兹 中 尚未 添加 有 具体 内 容 , 因 此 暂时 无 视图 的 变化 效果 。 
标题 区 域 设计 

标题 区 域 需要 使 用 < text > 组 件 实 现 。 
WXML(pages/index/index. Wxml) 代 人 码 厂 上段 修改 如 下 : 

1. <vVview class = 'container'> 


" < text> My Clock </text > 


3. </view> 


WXSS(pages/index/index. wxss) 人 代码 片 段 如 下 : 


1， /x 文本 样式 x/ 
2. text{ 

3. font— size: 40pt. /* 字号 大 小 */ 
4 font — weight: bold; /x* 字体 加 粗 */ 
5 1 


当前 效果 如 图 11-6 所 示 。 


手绘 时 名 
( 男 市 ) 


11-5 ”页 面 设计 图 11-6 ”标题 区 域 预览 效果 


手绘 时 钟 区 域 设 计 
手绘 时 钟 区 域 需要 使 用 < canvas > 组 件 实现 。 
WXML(pages/index/index. wxml) 代 人 码 厂 段 修改 如 下 : 
< Vlew class= container'> 
< text > My Clock </text > 


1 
2 
3. < canvas canvas - id = 'clockCanvas '></canvas > 
4. </view> 
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WXSS(pages/index/index. wxss) 代 码 片 段 如 下 : 


1. /x* 画布 样式 */ 

2. canvast 

3 width: 600rpx; /* 宽度 */ 

4. height: 600rpx; | * 了 珊 度 */ 

5 border :1rPx solid red /* 临时 属性 ,用 于 查看 画布 边框 * / 
6. |] 


当前 效果 如 图 11-7 所 示 。 
在 确认 夯 布 位置 和 尺寸 后 ,可 以 删除 或 注释 挤 WXSS 样式 中 临时 添加 的 border 属性 。 
区 数字 电子 时 钟 区域 设 计 

数字 电子 时 钟 区 域 需 要 使 用 < text > 组 件 实现 。 
WXML(pages/index/index. wxml) 人 代码 卢 段 修改 如 下 : 

1 < View Class= ‘container'> 

2 < text > My Clock </text > 

3. < canvas canvas — id= 'clockCanvas'></canvas > 

4 < text> 12:00:00 </text > 

5 </view> 

此 时 文本 中 显示 的 时 间 为 临时 效果 ,后 续 将 椅 换 为 丰 实 时 间 信 息 。 
当前 效果 如 图 11-8 所 示 。 


My Clock 


12:00:00 


图 11-7 手绘 时 钟 区 域 预览 效果 图 11-8 ”数字 电子 时 钟 区 域 预览 效果 


此 时 页 面 设 计 就 全 部 完成 了 ， 接 下 来 需 : 行 逻辑 实现 。 
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11.4.1 创建 画布 上 下 文 


首先 需要 根据 画布 组 件 的 canvas-id 属性 在 JS 文件 的 生命 周期 了 消 数 
onLoad 中 创建 画布 上 下 文 (CanvasContext) ,然后 才 可 以 进行 绘制 工作 。 
JS(pages/index/index. js) 代 码 片段 修改 如 下 : 


1. Page({ 

2 / x 

3 * 和 牛 命 周期 冰 数 -一 监 折 页面 加 载 

4 x*/ 

2. onLoad: function(options) 1 

6 // 创 建 画 布 上 下 文 

7 this.ctx = wx. createCanvasContext( 'clockCanvas') 
8 }, 

9. 1) 


其 中 引号 里 面 的 内 容 就 是 WXML 页 面 中 国 布 组件 的 canvas-id 属性 值 。 

这 里 可 以 稍 单 测试 一 下 画布 上 下 文 是 否 已 经 生殖 ,在 刚才 的 代码 下 方 奶 加 两 句 临 时 代码 ， 
绘制 一 个 矩形 。 

JSCpages/index/index. js) 代 人 码 厂 段 临 时 修改 如 下 : 


1. Pagelt{ 

2 / xx 

3 * 生命 周期 图 数 -- 监听 页 面 加 载 

4 * 

5. onLoad: function(options) { 

6 // 创 建 画 布 上 下 文 

7 this.ctx = wx.createCanvasContext( 'clockCanvas') 
8 // 设 置 画 笔 的 填充 颜色 为 红色 

9 this. ctx. fillStyle = 'red' 


10. /设置 矩形 为 左上 角 在 画布 的 (0,0) 坐 标点 ,长 和 宽 My Clock 
// 均 为 300 像素 

11. this. ctx. fillRect(0,0,300,300) 

12. // 在 画布 上 绘制 出 来 

13. this. ctx. draw( ) 

14. bs 

15. 上 ) 


当前 效果 如 图 11-9 所 示 ， 

由 图 可 见 , 此 时 已 经 可 以 利用 画布 上 下 文 进行 一 些 简 
单 的 图 形 绘 制 工 作 了 了 。 在 测试 完成 后 可 以 删除 或 注释 挥 
绘制 红色 填充 矩形 的 代码 ,等 待 正式 开发 电子 时 钟 。 
11.4.2 绘制 时 钟 刻度 


在 JS 文件 中 创建 自 定义 函数 drawClock 用 于 进行 电 


12:00:00 


子 时 钟 的 绘制 ,并 在 onLoad 函数 中 进行 调用 。JS(pages/ 图 11-9 画布 上 下 文 的 临时 使 用 效果 


index/index. js) 代 码 片 段 修改 如 下 : 


1. Pagel{ 

/ 

3 * 绘制 时 钟 

4 x*/ 

:六 drawClock: function() { 

6 / *1. 准 备 工作 */ 

7 // 定 义 时 钟 的 宽 和 高 (默认 单位 : px) 
8 . let width = 300, height = 300 

9. // 获 取 画 布 上 下 文 

10 . Var ctx = this.ctx 

11。 // 设 置 画 布 中 心 为 参照 点 

ctx. translate(width / 2, height / 2) 
13. // 将 画布 逆 时 针 旋 转 90° 

14. ctx. rotate( - Math. PI / 2) 

5. }, 

16. /xx 

17. < 生命 周期 图 数 -- 监 听 页 面 加 载 
18. 关 / 


19. onLoad: function(options) { 


20. // 创 建 画 布 上 下 文 


21. this.ctx = wx. createCanvasContext('clockCanvas') 
22. // 绘 制 时 钟 

23. this. drawClock!( ) 

24. }, 

25. }) 


上 述 代 码 首 先 规定 了 电子 时 钟 的 画面 尺寸 为 宽 、 高 均 为 300 像素 ,并 获取 画布 上 下 文 ; 然 
后 使 用 translate() 方 法 将 参照 点 移动 到 了 画布 的 中 心 坐 标 (150,150) ,表示 未 来 将 以 画布 中 心 
坐标 为 参照 点 进行 变形 .位 移 .旋转 等 设置 。 由 于 画布 默认 是 从 水 平 同 右 的 方 回 进行 圆 弧 的 绘 
制 ,所 以 使 用 rotate() 方 法 先 把 画布 整体 逆 时 针 旋 转 90 ,表示 将 从 水 平 癌 上 的 方向 开始 进行 
绘制 ,这 样 方便 进行 弧度 计算 。 

绘制 小 时 刻度 

首先 绘制 12 个 小 时 对 应 的 刻度 , 相 邻 两 个 刻度 之 间 的 间隔 为 30” ,换算 成 
弧度 单位 为 x/6。 因 此 可 以 使 用 for 循环 语句 循环 12 次 ,从 之 前 设置 的 水 平 
阿 上 的 方向 开始 绘制 第 一 条 刻度 ,然后 再 使 用 rotate() 方 法 顺 时 针 旋 转 30 绘 
制 下 一 条 刻度 ,直到 全 部 完成 为 止 。 

JS(pages/index/index. js) 代 码 片 段 修改 如 下 : 


1. Pagel{ 

2 / x 

3 * 绘制 时 钟 

4. x/ 

5. drawClock: function() { 
6 / x1. 准备 工作 */ 
代码 略 

8 


9 . / * 2. 绘 制 时 钟 刻度 */ 
10. /<*2-1. 绘 制 小 时 刻度 */ 
11. // 设 置 线 条 粗细 

12. ctx. lineWidth = 6 
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13. // 设 置 线条 末端 样式 


14. ctx. lineCap = “Tound 

15. // 绘 制 12 个 小 时 刻度 

16. for (let i = 0; i < 12; i++) { 
17. // 开 始 路 径 

18. ctx. beginPath( ) 

19. // 从 (100,0) 绘 制 到 (120,0) 
20. ctx. moveTo(100, 0) 

21. ctx. lineTo(120, 0) 

22. // 描 边 路 径 

23. CtX。StLIOkel( ) 

24. // 顺 时 针 旋 转 30- 

25. ctx. rotate(Math. PI / 6) 
26. } 

27. 

28. /* 绘制 所 有 内 容 */ 

29. ctx. draw( ) 

30. }， 

31. }) 

当前 效果 如 图 11-10 所 示 。 

由 图 可 见 , 此 时 已 经 完成 12 个 小 时 刻度 的 绘制 了 。 Ee 
绘制 分 钟 刻度 


然后 绘制 60 分 钟 对 应 的 刻度 , 相 邻 两 个 刻度 之 间 的 间 
隔 为 6 ,换算 成 弧度 单位 为 r/30。 因 此 可 以 使 用 for 循环 语句 循环 60 次 ,从 
之 前 设置 的 水 平 同 上 的 方 癌 开始 给 制 第 一 条 刻度 ,然后 冉 使 用 rotate() 方 法 
顺 时 针 旋 转 6 "绘制 下 一 条 刻度 ,直到 全 部 完成 为 止 。 视频 讲解 
JS(pages/index/index. js) 代 码 片 段 修 改 如 下 : 


1. Pagel({ 

9 / x 

3. * 绘制 时 钟 

4. *x/ 

5. drawClock: function() { 
6. / x1. 准备 工 作 */ 

7. 代码 略 

8. 

9. /x* 2. 绘 制 时 钟 刻度 x*/ 


10. /#2 一 4. 给 制 小 时 刻度 x*/ 
11. 代码 上 略 


13. /*2-2. 绘 制 分 钟 刻度 */ 
14. // 设 置 线 条 粗细 


15. ctx. lineWidth = 5 

16. // 设 置 线 条 末端 样式 

17. ctx. lineCap = “Tound 

18. // 绘 制 60 个 分 钟 刻 度 

19. for (let i = 0; i < 60; i++) { 
20. // 开 始 绘 制 路 径 

21. ctx. beginPath( ) 

22. // 从 (118,0) 绘 制 到 (120,0) 


"起 下 ctx. moveTo(118, 0) 
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24. ctx. lineTo(120, 0) 
25. // 描 边 路 径 

26. ctx. strokel( ) 

27. // 顺 时 针 旋 转 6 
28. ctx. rotate(Math. PI / 30) 
29. } 

30. 

31. /绘制 所 有 内 容 */ 
32. ctx. draw!( ) 

33. bs 

34. }) 


当前 效果 如 图 11-11 所 示 。 


由 图 可 见 , 此 时 已 经 完成 时 钟 全 部 刻度 的 绘制 了 , 接 下 


来 将 绘制 时 钟 指针 。 
11.4.3 绘制 时 钟 指针 
在 绘制 时 钟 指针 之 前 需要 获得 当 前 的 时 间 信 息 。 在 JS ee 


文件 中 创建 自 定 义 函 数 getTime 用 


drawClock 了 黄 数 中 进行 调用 ， 
JS(pages/index/index. js) 代 码 厂 上段 修改 如 下 : 


1 
2 
3 
4 
= 
6 
7 
8 
9 


Pagel { 
/ 关 基 

* 获取 当前 时 间 
x/ 


getTime: function() { 
let now = new Datel() 
let time = [] 
time[0] = now. getHours( ) 
time[1] = now.getMinutes() 
time[2] = now.getSeconds() 


// 将 24 小 时 制 转 换 为 12 小 时 制 
if (time[0] > 12) 
time[0] -= 12 


// 返 回 时 分 秒 数 组 
return time 

}, 

/ xx 
* 绘制 时 钟 
x/ 

drawClock: function() { 
/*1. 准 备 工 作 */ 
代 个 略 


/* 2. 绘制 时 钟 刻度 x*/ 
代码 略 


/*3. 获 取 当 前 时 间 */ 
let time = this.getTime() 


于 获取 当前 时 间 , 并 在 


图 11-11 绘制 分 钟 刻度 的 效果 


// 获 取 当 前 时 间 日 期 对 象 

// 声 明 一 个 空 数组 用 于 存放 时 、 分 、 秘 
// 获 得 小 时 

// 获 得 分 钟 

// 获 得 秒 钟 


// 获 取 当 前 时 间 


3 
32. 
E 天 站 
34. 
3 
36. 
47. 
38. 


开发 者 可 以 日 行使 用 console. log(time) 语 名 测试 控制 台 是 否 可 以 获取 当 各 tom 


}) 


let h = time[0] // 获 取 小 时 
let m = time[1] // 获 取 分 钟 
let s = time[2] // 获 取 秒 钟 
/ * 绘制 所 有 内 容 关 / 
ctx. drawl ) 

Pr 


EE 让 
绘制 时 针 i 
首先 绘制 时 针 ,以 12 点 方向 的 刻度 为 参照 ,当前 时 针 需 要 顺 时 针 旋 转 的 、 国 最 时 二 

角度 为 : 视频 讲解 


时 和 针 的 角度 二 360 /12x*h 十 360 /12/60* m 十 360 /12/60/60xs 


换算 成 弧度 单位 如 下 : 


时 和 针 的 弧度 二 x/6 x*h 十 nxn/360 x m 十 x/21600 x*s 


因此 先 根 据 公 式 计算 时 针 需 要 旋转 的 弧度 ,然后 进行 绘制 。 
JS(pages/index/index. js) 代 人 码 片 段 修改 如 下 : 


DO-Gnm 情 win 


Poooncaounhooonecoohhwnns 


Page({ 
/ x 


* 绘制 时 钟 
x/ 


drawClock: function() { 


/ x1. 准备 工作 */ 
代码 略 


/*2. 绘 制 时 钟 刻 度 * / 
代码 略 


/*3. 获 取 当 前 时 间 */ 
代码 上 略 


/x*4. 绘 制 时 钟 指针 */ 

/x*4-1. 绘 制 时 针 */ 

// 保 存 当 前 的 绘图 状态 

ctx. save( ) 

// 旋 转角 度 

ctx.rotate(h * Math.PI/6 + m * Math.PI/ 360 + s * Math.PI / 21600) 
// 设 置 线条 粗细 

ctx. lineWidth = 12 

// 开 始 绘 制 路 径 

ctx. beginPath( ) 

// 从 (- 20,0) 绘 制 到 (80,0) 

ctx. moveTo( -20，0) 
ctx. lineTo(80, 0) 
// 描 边 路 径 

ctx. strokel( ) 

// 恢 复 之 前 保存 的 绘图 


ctx. restore( ) 


样式 
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33. /¥* 绘制 所 有 内 容 */ 
34, ctx. draw( ) 

了 5 ， $F 

36. }) 


当前 效果 如 图 11-12 所 示 。 


12:00:00 


图 11-12 绘制 时 针 的 效果 


加 绘制 分 针 
然后 绘制 分 针 ,以 12 点 方 回 的 刻度 为 参照 ,当前 分 针 需 要 顺 时 针 旋 转 的 
角度 为 : 
分 针 的 角度 王 360?/60 * m 十 360?/60/60 xs 
换算 成 距 度 单位 如 下 : 
分 针 的 弧度 二 x/30 * m 十 x/1800*s 
因此 先 根 据 公 式 计 算 分 针 需 要 旋转 的 弧度 ,然后 进行 绘制 。 
JS(pages/index/index. js) 代 人 码 片 段 修 改 如 下 : 


1. Pagel{ 

3 * 绘制 时 钟 

4. 关 1 

5. drawClock: function() { 
6 / x1. 准备 工 作 */ 

7 代码 略 

[| 


9. / x 2. 绘 制 时 钟 刻度 x*/ 
10. 代码 略 


12. /* 3. 获取 当 前 时 间 */ 
13. 代码 略 
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15. /*4. 绘 制 时 钟 指针 x*/ 
16. /x*4 一 1. 绘 制 时 针 */ 
17. 代码 略 

18. /4-2. 绘 制 分 针 */ 
19. // 保 存 当 前 的 绘图 状态 


20. ctx. savel( ) 

21. // 旋 转角 度 

2 ctx. rotate(m * Math.PI/ 30 + s * Math.PI/1800) 
23. // 设 置 线 条 粗细 

24. ctx. lineWidth = 8 

25. // 开 始 绘 制 路 径 

26. ctx. beginPath( ) 

rs // 从 (-20,0) 绘 制 到 (112,0) 
28 . ctx. moveTo( - 20, 0) 

29. ctx. lineTo(112, 0) 

30. // 描 边 路 径 

31. ctx. stroke( ) 

3 // 恢 复 之 前 保存 的 绘图 样式 
33. ctx. restore( ) 

34. 

35. /x* 绘制 所 有 内 容 */ 

36. ctx. draw( ) 

了 7 . }， 

38. 月 ) 

当前 效果 如 图 11-13 所 示 。 

图 绘制 秒针 


最 后 绘制 秒针 ,以 12 点 方 问 的 刻度 为 参照 ,当前 秒针 需 
角度 为 : 
秒针 的 角度 二 360"/60 x*s 
换算 成 弧度 单位 如 下 : 
秒针 的 弧度 二 x/30*s 
因此 先 根 据 公 式 计 算 秒针 需要 旋转 的 弧度 ,然后 进行 绘制 。 
JS(pages/index/index. js) 代 人 码 厂 上 段 修改 如 下 : 


1. Pagel({ 

3 * 绘制 时 钟 

4. 关 / 

5. drawClock: function() { 
6 /*1. 准 备 工作 */ 

7 代码 略 

| 

9. /* 2. 绘 制 时 钟 刻度 x*/ 
10. 代码 上 略 

11. 

人 /* 3. 获 取 当 前 时 间 */ 
13， 代码 略 

14. 


15. / #4. 绘制 时 钟 指针 */ 
16. /#4 一 1. 绘 制 时 针 */ 
17. 代码 略 
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11. 


18. 
19. 
20 . 
21. 
22. 
23. 
24. 
"= 
26. 
27. 
28. 
29. 
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/x* 4 一 2. 绘 制 分 针 */ 
代码 略 
/x*4-3. 绘 制 秒针 */ 

// 保 存 当 前 的 绘图 状态 

ctx. savel ) 

// 旋 转角 度 

ctx. rotate(s * Math.PI / 30) 
// 设 置 画 笔 描 边 颜色 为 红色 
ctx. strokestyle = 'red' 
// 设 置 线条 粗细 

ctx. lineWidth = 6 

// 开 始 绘 制 路 径 

ctx. beginPath( ) 

// 从 (-30,0) 绘 制 到 (120,0) 
ctx. moveTo( - 30, 0) 

ctx. lineTo(120, 0) 
// 描 边 路 径 


ctx. strokel( ) 


// 设 置 填 充 颜 色 为 红色 

ctx.fillstyle = 'red' 

// 开 始 绘制 路 径 

ctx. beginPath( ) 

// 绘 制 圆 弧 

ctx.arc(0, 0, 10, 0, Math.PI x 2, true) 
// 填 充 圆 绝 

ctx. £ill() 

// 恢 复 之 前 保存 的 绘图 样式 


ctx. restore( ) 


/< 绘制 所 有 和 内容 */ 


ctx. drawl ) 


当前 效果 如 图 11-14 所 示 。 
由 图 可 见 , 此 时 已 经 完成 时 钟 全 部 指针 的 绘制 了 , 接 下 来 将 更 新 数字 电子 时 钟 的 信息 。 


4.4 显示 数 宇 电 了 于 时 钟 


WXML(pages/index/index. wxml) 代 码 上 请 段 修 改 如 下 : 


1 
2 
3 
4 
5 


<Vlew Class = Contalner > 
< 七 ext > My Clock </text > 
< canvas canvas — jd = 'clockCanvas'></canvas > 
< text>{{h}}:{{m}}:{{s}}</text > 

</view> 


JS(pages/index/index. js) 人 代码 片 段 修 改 如 下 : 


迪 。 
攻 训 
4 
2 


Pagel { 
/ x 
* 绘制 时 钟 
x/ 
drawClock: function() { 


图 11-14 


绘制 秒针 的 效果 


28. 


当前 效果 如 图 11-15 所 示 。 
由 图 可 见 , 已 经 成 功 更 新 数字 电子 时 钟 的 信息 。 


11.4.5 每 秒 实 时 更 新 


用 户 可 以 在 JS 文件 的 onLoad 函数 中 使 用 setInterval 图 效 设 置 每 秒 重 新 
刷新 画面 ,从 而 实现 动画 效 订 ,并 在 onUnload 轴 数 中 清除 计时 冀 。 
JSCpages/index/index. js) 人 代码 上 请 段 修改 如 下 : 


人 ~] 吕 人 n 上 必 La lo 捕 


呈请 
bE 
二 十 


-= 
IN 


}) 


}, 
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/x*1. 准 备 工 作 */ 
代码 略 


/x* 2. 绘制 时 钟 刻度 x / 
代码 略 


/* 3. 获取 当前 时 间 */ | 


/ 4. 给 制 时 钟 指针 */ 
代码 略 


/< 绘制 所 有 和 内容 */ 


ctx. drawl( ) 


/* 更 新 页 面 显 示 时 间 */ 
this. setDatal { 
h: h>9?h:'0'+h, 
m: m>9?7?m: '0' + m， 
s: 5S>9?s: 0 + 5 


}) 


Pagel { 
/ 关 关 


x 生命 周期 函数 -- 监听 页 面 加 载 
x / 


onLoad: function(options) { 


// 创 建 画 布 上 下 文 

this.ctx = wx. createCanvasContext('clockCanvas') 
// 给 制 时 和 钟 

this. drawClock( ) 


var that = this 

// 每 秒 更 新 绘制 

this. interval = setInterval(function() { 
that. drawClock( ) 

}, 1000) 


}, 


/ x 


* 生命 周期 函数 -- 监听 页 面 邯 载 


x/ 


onUnload: function() { 


clearInterval(this. interval) 
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图 11-16 ”时 钟 的 动态 效果 
东 时 手绘 时 钟 小 程序 就 全 部 完成 了 ,开发 者 可 以 目 行 更 换 时 钟 的 颜色 和 大 寸 效果 。 


DC 11.5 完整 代码 民 


app. json 文件 的 完整 代码 如 下 : 
{ 


"pages": [ 


"pages/ index/ index" 
] ， 
"window" : { 
"navigationBarTitleText": "我 的 时 钟 " 
} 
} 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


C0 品目 Lo 捕 


<Vlew class = Contalner > 
< text > My Clock </text > 
< canvas canvas — id= 'clockCanvas'></canvas > 
<text>{{h}}:{{m}}:{{s}}</text > 

</view> 


tn 


WXSS 文件 (pages/index/index. wxss) 的 完整 代 人 码 如 下 : 


1 /* 整体 容器 样式 x / 


2. .containerl! 


3 height: 100vh; /x* 高 度 x*/ 

4 display: flex; /x* flex 布局 模型 x / 
5. flex— direction: column; /* 玲 耻 布局 */ 

6. align— items: center; /水 平方 器 居中 x* / 
7 Justify— content: space ~ around ; /* 调整 内 容 同 际 * / 
8. | 

9. /x 文本 样式 x*/ 

10. text{ 

11. font — size: 40pt; /* 字号 大 小 */ 

12. font— weight: bold; / * 字体 加 粗 x*/ 

13. |】 


14. /xx 男 布 样式 x*/ 


15. canvas{ 


16. width: 600rpx:; /< 宽度 </ 
17. height: 600rpx; /< 商 度 关 / 
18. |} 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


1. Pagel({ 

/ 尖 关 

3 * 获取 当前 时 间 

4 . 关 1 

人 getTime: function() { 

6. let now = new Datel ) /7 获取 当前 时 间 日 期 对 象 
let time = [] // 再 明 一 个 空 数 组 用 于 存放 时 、 分 、 秒 
8. time[0] = now. getHours() // 获 得 小 时 
9. time[1] = now.getMinutes() // 获 得 分 钟 
10. time[2] = now.getSeconds() // 获得 秒 钟 
11. 

12. // 将 24 小 时 制 转换 为 12 小 时 制 

13. if (time[0] > 12) 

14. time[0] -= 12 

15. 

16. // 返 回 时 分 秒 数组 

17. return time 

18. }, 

19. /xx 

20. * 绘制 时 钟 

21. x / 


22. drawClock: function() { 
3 /x* 1. 惟 备 工作 */ 
24. // 定 义 时 钟 的 宽 和 高 (默认 单位 : px) 


2 let width = 300, 

20. height = 300 

27. // 获 取 画 布 上 下 文 

28. var ctx = this. ctx 

29. // 设 置 夯 布 中 心 为 参照 点 

30. ctx. translate(width / 2, height / 2) 
3 // 将 画布 逆 时 针 旋 转 90” 

32. ctx. rotate( — Math. PI / 2) 

33. 


34. / #2. 绘制 时 钟 刻度 */ 
35. /2 一 1. 绘 制 小 时 刻度 x*/ 
36. // 设 前 线条 粗细 

37. ctx. lineWidth = 6 


38. 
39. 
40. 
41. 
42. 
43. 
44. 
45 . 
46 . 
41. 
48. 
49 . 
50. 
51: 
“ 
5 
54. 
<“ 
56. 
57. 
58. 
59. 
60. 
61. 
0b2. 
63. 
6b4. 
65. 
bb . 
6b7 . 
68. 
69. 
70. 
71. 
72. 
Fs 
74. 
75. 
T6. 
77. 
78. 
eR 
80. 
81. 
82. 
83. 
84. 
85. 
86. 
87. 
88. 
89. 
90. 
91. 
92. 


// 设 置 线条 末 问 样式 

ctx. lineCap = "Tound' 

// 绘 制 12 个 小 时 刻度 

for (let i = 0; i<12; I++) I 
// 开 始 路 径 
ctx. beginPatht( ) 
// 从 (100,0) 绘 制 到 (120,0) 
ctx. moveTo(100, 0) 
ctx. lineTo(120, 0) 
// 摘 边 路 径 
ctx. strokel( ) 
// 顺 时 和 针 诈 转 30- 
ctx. rotate(Math. PI / 6) 

} 


/ * 2 一 2. 绘 制 分 钟 刻度 x*/ 

// 设 置 线条 粗细 

ctx. lineWidth = 5 

// 设 置 线条 末端 样式 

ctx. lineCap = “ITound 

// 绘 制 60 个 分 钟 刻度 

for (let i = 0; i<60; I++) { 
// 开 始 绘 制 路 径 
ctx. beginPath!( ) 
// 从 (118,0) 绘 制 到 (120,0) 
ctx. moveTo(118, 0) 
ctx. lineTo(120, 0) 
// 摘 边 路 径 
ctx. strokel( ) 
// 顺 时 和 针 旋 转 6 
ctx. rotate(Math. PI / 30) 

} 


/ * 3. 获 取 当 前 时 间 */ 

let time = this. getTime() /7 获取 当前 时 间 
let h = time[0] // 获 取 小 时 
let m = time[1| /7 获取 分 钟 
let s = time[2| /7 获取 秒 钟 


/ x 4. 绘 制 时 钟 指针 > / 
/x*4 一 1. 绘 制 时 针 */ 

// 保 存 当 前 的 绘图 状态 

ctx. savel ) 

// 旋 转角 度 

ctx. rotate(h * Math.PI/6 + m * Math.PI/360 + s * Math.PI / 21600) 
// 设 置 线条 粗细 

ctx. lineWidth = 12 

// 开 始 绘制 路 径 

ctx. beginpath( ) 

// 从 (一 20,0) 绘 制 到 (80,0) 

ctx. moveTo( — 20, 0) 

ctx. lineTo(80, 0) 

// 摘 边 路 径 

ctx. strokel( ) 

// 恢 复 之 前 保存 的 绘图 样式 


124. 


ctx. restore{ ) 


/ * 4 一 2. 绘 制 分 针 */ 
// 保 存 当 前 的 绘图 状态 


ctx. savel ) 
// 旋 转角 度 
ctx. rotate(m * 
// 设 置 线条 粗细 
ctx. lineWidth = 
// 开 始 绘 制 路 径 
ctx. beginPath( ) 


// 从 (一 20,0) 绘 制 到 (112,0) 
,0) 


ctx. moveTo( — 20 
ctx. lineTo(112., 
// 摘 边 路 径 
ctx. strokel( ) 


// 恢 复 之 前 保存 的 绘图 样式 


ctx. restore( ) 


Math.PI /30 + s * Math.PI /1800) 
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0) 


/*4- 3. 绘 制 秒针 * / 
// 保 存 当前 的 绘图 状态 


ctx. savel ) 
// 放 转角 度 


ctx. rotate(s * 


ctx. strokeStyle 
// 设 置 线条 粗细 
ctx. lineWidth = 
// 开 始 绘制 路 径 
ctx. beginPath!( ) 


// 从 (一 30,0) 绘 制 到 (120,0) 
, 0) 


ctx. moveTo( — 30 
ctx. lineTo( 120, 
// 摘 边 路 径 
ctx. stroke( ) 


Math.PI / 30) 
// 设 置 夯 笔 描 边 颜色 为 红色 


一 Fed 


6 


0) 


// 设 置 十 充 颜色 为 红色 


ctx. fillStyle = 
// 开 始 绘制 路 径 
ctx. beginPatht( ) 
// 绘 制 圆 弧 


ctx.arc(0, 0, 10, 0, Math.PI * 2, true) 


// 填 充 圆 弧 
ctx. fill() 


// 恢 复 之 前 保存 的 绘图 样式 


ctx. restoret{ ) 


‘Ted' 


/* 绘制 所 有 内 容 */ 


ctx. drawl ) 


/* 里 新 页 面 显 示 时 间 */ 


this. setDatal { 
h: h>9?h: 
m:m>9?m: 
SsS: S>9?s.: 


0 十 h, 
"站 ” 十 m, 
0" 十 局 


< 生命 周期 图 数 -- 监听 页 面 加 载 
x 
onLoad: function(options) { 
// 创 建 画布 上 下 文 
this.ctx = wx. createCanvasContext('clockCanvas') 
// 人 绘制 时 钟 
this. drawClock( ) 


var that = this 
// 每 秒 更 新 绘制 
this. interval = setInterval(function() { 
that. drawClock{ ) 
}, 1000) 
}, 
/ Xx 
x 生命 周期 函数 -- 监听 页 面 印 载 
x*x/ 
onUnload: function() { 
ClearInterval(this. interval) 


小 程序 游戏 拼图 游戏 


在 学 习 了 < canvas >( 画 布 ) 组 件 和 小 程序 界面 API 中 绘图 的 相关 用 法 以 后 ,读者 不 妨 尝 试 
ee 


。 综合 应 用 所 学 知识 创建 完整 的 拼图 游戏 项 目 ; 
。 训练 掌握 < canvas > 组 件 和 绘图 API。 


f 
本 项 目 一 共 需 要 两 个 页 面 , 即 首页 和 游戏 页 面 , 其 中 ,首页 用 于 呈现 关卡 
菜单 ,点 击 对 应 难度 的 关卡 后 进入 游戏 画面 。 


12.1.1 首页 功能 需求 


首页 功能 需求 如 下 
(1) 首页 需要 包含 标题 和 关卡 列表 。 

(2) 关卡 至 少 要 有 6 个 关卡 选项 ,每 个 关卡 显示 预览 图 片 和 第 几 关 ， 
(3) 点 击 关卡 列表 可 以 打开 对 应 的 游戏 画面 。 


12.1.2 游戏 页 功能 需求 


游戏 页 功能 需求 如 下 。 

(1) 游戏 页 面 需 要 显示 游戏 提示 图 ,游戏 画面 和 “重新 开始 ”按钮 。 

(2) 每 关 游 戏 提示 图 显示 对 应 的 图 片 预览 。 

(3) 游戏 画面 随机 将 原 图 打 乱 为 3X3 的 小 方块 ,并 且 可 移动 被 点 击 的 方块 。 
(4) 点 击 “ 重 新 开始 ”按钮 可 以 重新 随机 打 乱 小 方块 并 开始 游戏 。 


本 项 目 创建 选择 空白 文件 夹 jigsawGame, 效 果 如 图 12-1 所 示 。 tr 
单 击 “新 建 ? 按 钮 完成 项 目 创建 ,然后 准备 手动 修改 页 面 配置 文件 。 视频 讲解 


SA 


| jgsawGame 
Ewaxdemo Workspaced 癌 S3WGarme 
Wx19079110a0f01e8a 


车 无 ApplD 可 注册 


建 服务 露 ， 使 用 平台 提供 的 API 进行 核心 业务 开发 ， 
庄 代 。 了 解 详情 


”腾讯 云 


JavaScript 


图 12-1 小 程序 项 目 填写 效果 示意 图 


12.3.1 人 刨 建 页 面 文件 


项 目 创建 完毕 后 ,在 根 目录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 
一 般 来 说 首页 默认 命名 为 Index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 
称 可 以 自 定义 。 本 项 目 有 两 个 页 面 文件 ,需要 创建 index( 首 页 页 面 ) 和 game “下 
(游戏 页 面 )。 

具体 操作 如 下 : 

(1) 将 app. json 文件 内 pages 属性 中 的 “pages/logs/logs” 改 成 “pages/game/game”。 

(2) 按 快捷 键 Ctrl 十 S 保存 修改 后 会 在 pages 文件 夹 下 自动 生成 game 目录 。 


12.3.2 删除 和 修改 文件 


具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index.js 中 的 全 部 代码 ,并且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 月 
动 补 全 图 数 (如 图 12-2 所 示 ) 。 

(5) 删除 app. wxss 中 的 全 部 代码 。 

(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 自动 
补 全 函数 (如 图 12-3 所 示 )。 


imdex.|S ] 
1 Aindex.js 


2 


uncticon 0 


中 getCurrentPages 

3 package 

FP pauseBackgroundAudio 
PP previewImage 

AP canvasPutIimageData 


12-2 输入 关键 词 创建 Page 函数 


app.|S 各 
1 /fapp .js 
2 aDRP 


12-3 输入 关键 词 创 建 App 函数 


12.3.3 创建 其 他 文件 

接 下 来 创建 其 他 自 定义 文件 ,本 项 目 还 需要 一 个 images 文件 夹 用 于 存放 关卡 图 片 。 单 击 
目录 结构 左上 角 的 十 号 创建 文件 夹 并 命名 为 images, 该 文件 夹 名 称 可 以 由 开发 者 自 定义 。 

图 片 素材 展示 如 图 12-4 所 示 。 


| | I | TT Tt 
| sg A 一 
ss 3AY =~ | 
Www 而 面 面 面 再 ,a 
SR HFLLO 多 
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(a) pic01.Jpg (b) pic02.]Jpg 
. Er- 二 


zhelia 


sUMMER 


(d) pic04.jpg (e) pic05.jpg (f) pic06.jpg 
司 12-4 图 片 素材 展示 


右 击 目 录 结 构 中 的 images 文件 夹 ,选择 “硬盘 打开 ”, 将 图 片 复 制 .粘贴 进去 。 


全 部 完成 后 的 目录 结构 如 图 12-5 所 示 。 
此 时 文件 配置 就 全 部 完成 ,12. 4 节 将 正式 进行 页 面 布局 和 样式 设计 。 


微 信 小 程序 开发 实则 


“ [SS images 
pic01.jpg 
| pic02.jpg 
pic03.jpg 
pic04.jpg 
pic05.jpg 
pic06.jpg 
“ [SS pages 
v [SS game 
I9 game.js 
{ game.json 
>» Ogame.Wwaml 
Was Oafie.Wss 
DS index 
I indexjs 
{} indexjson 
> Index.wxml 
wss INdex Wxss 
3 app.js 
{} app.json 
wa ADD.WXSS 


{a} project.config.json 


12-5 页面 文 件 创建 完成 


12.4.1 导航 栏 设计 


window 属性 进行 重新 配置 来 | 日 get oth app. ]Son 文件 代 


码 如 下 : 视频 讲解 
和 
2% "pages" : [代码 略 ]， 
3。 "window" : { 
4. "navigationBarBackgroundColor” : " # E64340", 
5. " navigationBarTit1leText": "拼图 游戏 ” 
6. } 
7. 1]} 
上 述 代 码 可 以 更 改 导 航 栏 痛 景 色 为 珊瑚 红色 ,字体 为 
白色 ,效果 如 图 12-6 所 示 。 图 12-6 
12.4.2 页 面 设计 
公共 样式 设计 


自 完 在 app. wxss 中 设置 页 面容 玉 和 顶端 标题 的 公共 


样式 ,代码 如 下 : 


1. /x* 页面 容 右 样式 */ 
2. .container { 
: height: 100vh; 
4. color: # E64340; 
- font ~ weight: bold; 
6 . display: flex; 
1. flex— direction: column; 
8. align— items: center; 
9 . Justify— content: Space 一 evenly; 
10. | 
11. /x* 顶端 标题 样式 */ 
12. .title { 
13. font — size: 18pt; 
14. } 
首页 设计 
自 页 主要 包含 两 部 分 内 容 , 即 标题 和 关卡 列表 ,页 面 设计 如 图 12-7 所 示 。 
计划 使 用 如 下 组 件 。 
。 顶端 标题 : < view > 容器 ; 
。 天 卡 列 表 : < view > 容 表 ,内 部 使 用 效 组 循环 。 


WXML(pages/index/index. wxml) 代 码 如 下 : 


1. <view class= Contalner > 

2. <! 一 一 标题 -一 > 

3. <Vjiew class = 'title'> 游 戏 选 关 </view> 
4. 

5: <!- 一 关卡 列表 -一 > 

6 . <Vlew Class= 'levelBox'> 

71. < Vlew Class= 'box'> 

8. < image src = '/images/pic01. jpg'></image > 
9 . < text > 第 1 关 </text > 

10. </ View > 

11. </view> 

> 

13. </view> 


相关 WXSS(pages/index/index. wxss) 代 人 码 片 段 如 下 : 


2. .levelBoxl{ 

3. width: 100%.; 

4. } 

5. /x 单个 关卡 区 域 */ 

6. .box{ 

7. width: 50%.; 

8. float: left: 

9. margin: 25rpx 0; 

10. display: flex; 

11. flex— direction: column; 
12. align ~ items: center; 
13. } 

14. /* 选 关 图 片 */ 

15. imaget 

16. width: 260rpx; 


12-7 


首页 设计 图 


17. height: 260rpx; 

18. } 

当前 效果 如 图 12-8 所 示 。 

由 图 可 见 , 此 时 可 以 显示 标题 和 一 个 临时 关卡 。 由 于 尚未 获得 关卡 数据 ， 
所 以 暂时 无 法 显示 完整 的 关卡 列表 , 仅 供 作为 样式 参考 。 

游戏 页 面 设计 

游戏 页 面 需要 用 户 点 击 首页 的 关卡 列表 ,然后 在 新 窗口 中 打开 该 页 面 。 
游戏 页 面包 括 游戏 提示 图 .游戏 画面 和 “重新 开始 ”按钮 ,页 面 设计 如 图 12-9 各 天 斌 得 
所 示 。 


游戏 区 域 
(画布 ) 


i 重新 开始 EE 按钮 


图 12-8 首页 效果 图 12-9 ”游戏 页 设计 图 


由 于 暂时 没有 做 点 击 跳 转 的 逻辑 设计 ,所 以 可 以 在 开发 工具 顶端 选择 “普通 编 详 ”下 的“ 添 
加 编译 模式 ”, 并 携带 临时 测试 参数 level 二 pic01. jpg ;如 图 12-10 所 示 。 


game 


pages/game/game 


.level=pic01 jpg 


i 


| | 下 次 编译 时 檬 拟 覃 新 ( 需 1.9.90 及 以 上 基础 库 版 本 ) 


12-10 添加 game 页 面 的 编译 模式 


此 时 预览 就 可 以 直接 显示 game 页 面 了 ,设计 完毕 后 再 改 回 “普通 编译 ”模式 即 可 重新 显 
示 首 页 。 


| 


全 


计划 使 用 如 下 组 件 。 

。< view >: 整体 容器 和 顶端 标题 ，; 

。 < image>: 提示 图 ，; 

。 < canvas >: 游戏 画布 ; 

。 <button >:“ 重 新 开始 ?按钮 。 
WXML(pages/game/game. wxml) 人 代码 如 下 : 


< Vlew class= Contalner > 


<!-- 提示 图 区 域 --> 
< View class = 'title'> 提 示 图 </view> 
< image src = '/images/pic01. jpg'></image > 


<!-- 游戏 画布 -> 


1 

2 

3 

4. 
5. 
6 

7 < canvas canvas — id = 'myCanvas'></canvas > 
8 


9. <!-- “重新 开始 ?按钮 -一 > 
10. < button type = 'warn'> 重 新 开始 </button > 
11. </view> 


WXSS(pages/game/game. Wxss) 代 人 码 如 下 : 


image { 
width: 250rpx; 
height: 250rpx; 


/* 画布 样式 x / 
. canvas { 

9 . border: lrpx solid; 

10. width: 300px; 

11. height: 300px; 

12. } 

当前 效果 如 图 12-11 所 示 。 

由 图 可 见 , 此 时 可 以 显示 完整 样式 效果 。 由 于 尚未 获 
得 汶 戏 数据 ,所 以 暂时 无 法 根据 用 户 点 击 的 天 卡 人 人口 显示 
对 应 的 游戏 内 容 , 仅 供 作 为 样式 参考 。 

此 时 页 面 布局 与 样式 设计 就 已 完成 ,12.5 方 将 介绍 如 
何 进 行 逻 辑 处 理 。 


1 
2 
3 
4. 
5. } 
6 
7 
8 


图 12-11 游戏 页 面 效果 图 


12.5.1 首页 逻辑 


首页 主要 有 两 个 功能 需要 实现 ,一 是 展示 关卡 列表 ,二 是 点 击 图 片 能 跳 转交 入 国 去 
到 游戏 页 面 。 ee 
关卡 列表 展示 
在 JS 文件 的 data 中 录入 关卡 图 片 的 数据 信息 ,这 里 以 6 个 关卡 为 例 。 


苇 , 震 要 衣 和 允 为 天 卡 列 表 项 目 添加 扣 击 事件 。 


相关 JSCpages/index/index. js) 代 码 片 段 如 下 : 


1l. Pagel{ 

; 1 二 

3. * 页 面 的 初始 数据 
4. wi 

5. data: { 

6. levels: [ 

ra Pic01. Jpg ， 
8. Pic02. ]pg ， 
9. 了 Pic03. ]Pg ， 
10 . Pic04. ]pg ， 
11. 'pic05. Jpg', 
12. ‘pic06. jpg' 
13. ] 

14. 上 

15。 }) 


接着 为 关卡 对 应 的 < view > 组 件 添 加 wx:for 属性 循环 显示 关卡 列表 数据 和 图 片 。 
修改 后 的 WXML(pages/index/index. wxml) 代 码 如 下 : 


1. <Vlewclass = 'container'> 

2. <!- 一 标题 -一 > 

3. <Vliew class = 'title'> 游 戏 选 关 </view> 

4. 

5 <! 一 一 关卡 列表 一 一 > 

6. <Vlew class= "levelBox'> 

7. <Vliew class = 'box' wx:for = '{{levels}}' wx:key = 'levels{{index}}'> 
8. < image src= '/images/{{item}}'></image> 

9. < text > 第 {{index + 1}} 关 </text > 

10. </View> 


11. </view > 
12. </view> 


此 时 页 面 效 果 如 图 12-12 所 示 。 
反击 跳 转 游戏 页 面 
奇 希望 用 户 点 击 关 卡 图 片 即 可 实现 跳 


相关 WXML (pages/index/index. wxml) 


代码 片段 修改 如 下 : 
1. <vVlew class = Contalner > 
» <! 一 一 标题 -一 > 
3. <view class = 'title'> 游 戏 选 关 </view> 
4. 
- <! 一 一 关卡 列表 一 一 > 
6 . < VlewClass = 'levelBox'> 
Ts < View class = 'box' wx:for= '{{levels}}' wx:key = 


'Jevels{{index}}'bindtap = 'chooseLevel' data - level = 
'{{item}}'> 


8. < image src= '/images/{{item}}'></image> 
9 . < text > 第 {{findex+ 1}} 关 </text > 

10. </view > 

11. </View> 

1 2 


13. </view> 图 12-12 ”首页 关卡 列表 展示 
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上 述 代 码 表示 为 关卡 添加 了 自 和 定义 点 击 事件 晒 数 chooseLevel, 并 且 使 用 data-level 属性 
携带 了 关卡 图 片 信 息 。 
然后 在 对 应 的 index. js 文件 中 添加 chooseLevel 函数 的 内 容 ,代码 片 段 如 下 : 


1. Pagel{ 

2 / 

3 * 自 定 义 函 数 -- 游戏 选 关 
4 x*x/ 

5 chooseLevel: function(e) { 
6. let level = e.currentTarget. dataset. level 
7 wx. navigateTo( { 

8 url: '../game/game?level =' + level 
9. }) 
10. }s 
11. }) 


此 时 已 经 可 以 点 击 跳 转 到 game 页 面 , 并 且 成 功 携带 了 关卡 图 片 数据 ,但 是 仍 需 在 game 
页 面 进行 携 市 数据 的 接收 处 理 才 可 显示 正确 的 游戏 画面 。 


12. 5.2 游戏 页 逻辑 


游戏 页 主要 有 两 个 功能 需要 实现 ,一 是 显示 提示 图 ; 二 是 游戏 逻辑 实现 。 

显示 提示 图 

在 首页 逻辑 中 已 经 实现 了 页 面 跳 转 并 携带 了 关卡 对 应 的 图 片 信息 ,现在 。 站 导 
需要 在 游戏 页 面 接收 关卡 信息 ,并 显示 对 应 的 图 片 内 容 。 

相关 JS(pages/game/game.js) 代 码 厂 段 如 下 : 


1. Pagel(lf{ 

7 / x 

3 < 生命 周期 靖 数 -- 监听 页 面 加 载 

4 关 1/ 

5 onLoad: function(options) { 

6 // 更 新 图 片 路 径 地 址 

7 url = '/images/' + options. level 
8 // 更 新 提示 图 的 地 址 

9 . this. setData( {url: url}) 

10. Fs 
11. }) 


修改 WXML(pages/game/game. wxml) 代 码 片 段 如 下 : 


1 < Vlew Class = Contalner > 

<!-- 提示 图 区 域 -一 > 

3 < View class = 'title'> 提 示 图 </view > 
4. < image src = '{{url}}'></image> 
5 

6 

7 


</view> 


此 时 重新 从 自 页 点 击 不 同 的 关卡 图 厂 跳 转 就 可 以 发 现 已 经 能 够 正确 显示 对 应 的 内 容 了 。 
运行 效 朱 如 图 12-13 所 示 。 


图 12-13 ”首页 列表 中 的 选 关 效果 


游戏 逻辑 实现 

1) 准备 工作 

首先 在 game. js 文件 的 顶端 记录 一 些 游 戏 初 始 数 据 信 息 。 
对 应 的 JS(pages/game/game.js) 代 码 片 段 添加 如 下 : 


// 方 块 的 初始 位 置 

Var num = [ 
[00%, 01'; "02"]; 
Ws Uh ly A 
[20° "21"; "22"| 

] 

/7 方块 的 宽度 

varw = 100 

// 图 片 的 初始 地 址 

. Var url] = '/ images/pic01. jpg' 


0] 


‘0 


. Pagel({ 


于 
> Lu la 搬 避 


4 


2) 初始 化 拼图 画面 

传统 做 法 是 随机 抽取 画面 中 的 任意 两 个 方块 ， 
然后 交换 彼此 的 位 置 ,在 进行 足够 多 次 数 的 交换 后 基 
本 可 以 实现 随机 打 乱 的 效果 。 但 是 这 种 方法 有 一 个 
溢 端 ,就 是 有 时 候 会 陷入 无 解 的 死 局 ,例如 图 12-14 
所 示 的 效 末 。 

因此 可 以 考 卡 从 空 日 方块 的 所 在 位 置信 手 ,每 次 随机 让 它 和 


图 12-14 无 解 的 游戏 效果 


周围 的 邻近 方块 交换 位 置 , 这 样 可 以 通过 方块 反 回 移动 回 到 最 初始 状态 (确保 本 局 有 解 ) ,并 且 
在 交换 足够 多 的 次 数 后 也 可 以 实现 随机 打 乱 的 效果 。 

在 game. js 文件 中 添加 shuffle 图 数 ,用 于 重新 开始 游戏 。 

对 应 的 JS(pages/game/game.js) 代 人 码 片 段 添加 如 下 、 


1. Page({ 

2. / xx 

3. * 月 定义 函数 -- 随机 打 乱 方块 顺序 

4. */ 

3 shuffle: function() { 

6. // 先 令 所 有 方块 回归 初始 位 置 

于 num = |[ 

8. [1 00, "01', "02"], 

9 . Loom Ta 

10. [ '20', '21', "227] 

11. ] 

12. // 记 录 当 前 空 日 方块 的 行 和 列 

13. Var TOW = 2 

14. Var col] = 2 

15. // 打 乱 方块 顺序 100 次 

16. for (var i1 = 0; LI<100; I++) { 

17. // 随 机 产生 其 中 一 个 方向 : 上 (0)、 下 (1)、 左 (2)., 右 (3) 
18. Var direction = Math.round{(Math. random() * 3) 
19. A 上 :0 

20. if (direction == 0) { 

21. // 空 白 方块 不 在 最 上 面 一 行 

2. if (row !'= 0) { 

// 交 换 位 置 

24. num[ row|[col] = num[row — 1][col|] 
25. num[ row — 1][col] = "22 

26. // 更 新 空白 方块 的 行 

二 了 。 TOW 一 = 1 

28. } 

29. } 

30. /I 下 :1 

31. else if (direction == 1) { 

32. // 空 日 方块 不 在 最 下 面 一 行 

3 if (row != 2) { 

34. /1 交换 位 置 

35. num[ row][col] = num[row + 1][ecol] 
36 . num| row + 1][col]j = "22 

3 // 里 新 空白 方块 的 行 

38. row += 1 

39. } 

40. } 

41. /7 :2 

42. else if (direction == 2) { 

43. // 空 白 方块 不 在 最 左 侧 

44. if (col != 0) { 

45. // 交 换 位 置 

46. num[ row][col] = num[row][col - 1] 
47. num[ row]j[col 一 1] = '22" 

48. // 时 新 空 日 方块 的 列 


49. col -= 1 


30. } 


51. } 

5 // 右 :3 

53. else if (direction == 3) { 
54. // 空 日 方块 不 在 最 右 侧 

55. if (col != 2) { 

56. // 交换 位 置 

57. num[ row][col] = num[row|[col + 1] 
58. num[ row][col + 1] = '22" 
59. // 更 新 空 晶 方块 的 列 

60. col += 1 

61. } 

62. } 

63. } 

64. 

65. }) 


上 述 代 码 表示 使 用 for 循环 进行 了 100 次 打 乱 ,开发 者 可 以 根据 自己 的 需求 更 改 循环 次 
数 。 每 次 使 用 Math. random() 方 法 从 上 .下 .左右 4 个 方向 中 随机 产生 一 个 方向 ,之 后 如 果 
符合 条 件 则 交换 空白 方块 和 图 片 方块 的 位 置 。 

然后 在 game. js 中 添加 自 定义 函数 drawCanvas, 用 于 将 打 乱 后 的 图 片 方块 绘制 到 画 
布 上 。 

对 应 的 JSCpages/game/ygame.js) 代 码 片 段 添加 如 下 : 


1. Pagelf{ 

2 . / xx 

3. * 自 定义 函数 -- 绘制 画布 内 容 

4. x 

5. drawCanvas: function() { 

6. let ctx = this. ctx 

Ps 

8. // 清 空 画 布 

9. ctx. clearRect(0, 0, 300, 300) 

10. 

11. // 使 用 双重 for 循环 绘制 3x 3 的 拼图 
12. for (var i = 0; i< 3; i+t++){ 

13. for (var ] = 0; j < 3; jt+) 1{ 

14. if (num[i][j] != '22') { 

15. // 获 取 行 和 列 

16. var row = parseInt(num[i][j] / 10) 
17. var col = num[i][j] 和 10 
18. // 绘 制 方块 

19. ctx. drawImage(url, col x¥xW, row XWwW, W: W ] 关 Wr i x*xw, w, Ww) 
20. } 

21. } 

22. } 

23. ctx. draw( ) 

24. 上 

25. }) 


最 后 在 game. js 的 onLoad 图 数 中 调用 月 定义 力 数 shuffle 和 drawCanvas。 
对 应 的 JSCpages/game/ygame. js) 代 码 片段 添加 如 下 : 


1. Page({ 


ID DO 局 lo 


产 FF 请 
本 


1 
16， 


当前 效果 如 图 12-15 所 示 。 

3) 移动 被 点击 的 方块 

修改 game. wxml 页 面 中 的 画布 组 件 
(< canvas >) ,为 其 绑 定 和 触摸 事件 。 

WXML(pages/game/game. wxml) 代 码 
修改 后 如 下 : 


0 捕 


}) 


< 生命 周期 图 数 -- 监听 页 面 加 载 
wi 
onLoad: function(options) { 


}, 


// 更 新 图 片 路 径 地 址 

url = '/images/' + options. level 

// 更 新 提示 图 的 地 址 

this. setData({url:url 上 |) 

// 创 建 画 布 上 下 文 

this.ctx = wx.createCanvasContext!( 'myCanvas') 
// 打 乱 方 块 顺序 

this. shuffle( ) 

// 绘制 画布 内 容 

this. drawCanvas( ) 


ET i 
视频 讲解 


< Vliew class = “Contalner > 


<!-- 提示 图 区 域 (代码 略 ) -一 > 


<! 一 一 游戏 画布 -一 > 
< canvas canvas — jd = 'myCanvas' bindtouchstart = 'touchBox'></canvas > 


<!-- “重新 开始 ”按钮 (代码 略 ) -一 > 


</view> 


Fp 


jp 
而 要 J | 
NI 会。 
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图 12-15 ”随机 打 乱 效果 


在 game. js 文件 中 添加 月 定义 图 数 touchBox, 用 于 实现 图 片 方 块 的 移动 。 
对 应 的 JSCpages/ygameygame. js) 代 码 片 段 添 加 如 下 : 


] 
2 
3 
4 
35. 
6 
7 
8 
9 


Pagel { 


/ ¥¥ 


* 自 定义 函数 -- 监听 点 击 方块 事件 
*/ 


touchBox: function(e) { 


// 如 果 游 戏 已 经 成 功 , 不 做 任何 操作 
if (this. data. isWin) { 

// 终止 本 函数 

return 


} 


// 获取 被 点 击 方块 的 坐标 x 和 vy 
var x = e.CchangedTouches[0].x 
var y = e.changedTouches[0].y 
// console. log('x:'+xt+',y:'+y) 


// 换算 成 行 和 列 


var row = parseInt(Y / w) 


var col = parseInt(x / w) 


// 如 果 上 点 击 的 不 是 空白 位 置 
if (num[row][col] != '22') { 
// 尝试 移动 方块 


this. moveBox(row, col) 


// 重新 绘制 画布 内 容 
this. drawCanvasl( ) 


// 判断 游戏 是 否 成 功 
if (this.isWin()) { 


} 
} 
}, 


/ ¥¥ 


// 在 画面 上 绘制 提示 语句 
let ctx = this.ctx 


// 绘制 完整 图 片 
ctx. drawImage(url, 0, 0) 


// 绘制 文字 

ctx. setFillStyle( '# e64340') 

ctx. setTextAlign( 'center') 

ctx. setFontSize(60) 

ctx. fillText( ' 游 戏 成 功 ',150, 150) 
ctx. draw( ) 


* 自 定义 函数 -- 移动 被 点 击 的 方块 


其 


moveBox: function(i, j) { 
// 情 况 1: 如果 被 点 击 的 方块 不 在 最 上 方 ,检查 可 否 上 移 
if (i>0){ 
// 如 果 方 块 上 方 是 空白 
if (num[i - 1][j] == '22') { 


} 
} 


// 交 换 方 块 与 空白 的 位 置 
num[i - 1][j] = num[i][j] 
num[i][j] = '22， 


return 


// 情 况 2: 如 果 被 点 击 的 方块 不 在 最 下 方 , 检查 可 否 下 移 
if (i <2){ 

// 如 果 方 块 下 方 是 空白 

if (num[i + 1][j] == '22') { 


// 交 换 方块 与 空白 的 位 置 
num[i + 1][j] = num[i][j] 
num[i][j] = '22'" 


return 


} 


// 情 况 3: 如果 被 点 击 的 方块 不 在 最 左边 ,检查 可 否 左 移 
if (j > 0)f{ 
// 如 果 方 块 左边 是 空白 
if (num[i][j ~ 1] == '22') { 
// 交 换 方块 与 空白 的 位 置 
num[i][j -~ 1] = num[i][j] 
num[i][j] = ?22 
return 
} 
} 


// 情 况 4: 如 果 被 点 击 的 方块 不 在 最 右边 ,检查 可 否 右 移 
if (j< 2) { 
// 如 果 方块 右边 是 空白 
if (num[i][j + 1] == '22') { 
// 交 换 方 块 与 空白 的 位 置 
num[i][j + 1] = num[i][j] 
num[i][j] = '22" 


return 
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(a) 移动 前 (b) 移动 后 
12-16 移动 被 点 击 的 方块 


判断 游戏 成 功 

首先 在 game. js 文件 的 data 中 添加 初始 数据 isWin, 用 于 标记 游戏 成 功 
与 否 。 

对 应 的 JS(pages/game/game.js) 代 码 片 段 添加 如 下 : 

1. Page({ 

2 / x 

3 * 页 面 的 初始 数据 

4. 关 1/ 

5. data: { 

6 isWin: false 

7 ts 

8. 用) 
在 上 述 代 码 中 isWin 为 false 表示 游戏 尚未 成 功 , 当 成 功 时 会 重 置 为 true。 
在 game. js 文件 中 添加 月 定义 图 数 isWin, 用 于 判断 游戏 是 否 已 经 成 功 。 
对 应 的 JS(pages/game/game.js) 代 码 片 段 添加 如 下 : 


1. Pagel{ 

- / ¥¥ 

3. * 自 定义 函数 -- 判断 游戏 是 否 成 功 
4. 关子 

5. isWin: function() { 

6. // 使 用 双重 for 循环 遍历 整个 数组 
7. for (var i = 0; i< 3; i++) { 

8. for (var ] = 0; j < 3; j++) { 
9. // 如 果 有 方块 位 置 不 对 

10. if (num[i][j] '= i x*10 + j)f{ 
11. // 返 回 false, 表 示 游 戏 尚未 成 功 
12. return false 

13. } 

14. } 

是 本。 } 

16. // 更 新 游戏 成 功 状 态 

17. this. setData(l {isWin: true}) 

18. // 返 回 true, 表示 游 戏 成 功 

19. return true 

20. 上 

21. }) 


-a . ’ 有 | 


et 上 = 

1 er 
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然后 修改 game. js 中 的 touchBox 函数 ,要 求 被 触发 时 追加 对 游戏 成 功 状态 的 判断 。 


对 应 的 JS(pages/game/game.js) 代 码 片 段 修 改 如 下 : 


1. Pagel({ 

2 / x 

3 # 目 定 义 图 数 -- 点 击 方块 

4 x/ 

5. touchBox: function(e) { 

6 // 如 果 游 戏 已 经 成 功 , 不 做 任何 操作 
7 if(this. data. isWin){ 

8 return 

9 


} 


10. // 获 取 被 点 击 的 坐标 x 和 y( 代 人 码 略 ) 
// 换 算 成 行 和 列 (代码 略 ) 


12. 

13. /7 如果 点 击 的 不 是 空 晶 位置 
14. if (num[row|[coll] '= '22') { 
15. // 笠 试 移动 方块 (代码 上 略 ) 

16. // 重 新 绘制 画布 内 容 ( 代 码 略 ) 
17. 

18. // 判 断 游戏 是 否 成 功 

19. if (this.isWin()) { 

20. let ctx = this. ctx 

21. // 绘 制 完整 图 片 

22. ctx. drawImage(url, 0, 0) 
23. // 绘 制 文 字 提 示 

24. ctx. setFillStyle( '# E64340°') 
25. ctx. setTextAlign( 'center') 
26. ctx. setFontSize(60) 

27. ctx. fillText( ' 游 戏 成 功 ', 150, 150) 
28. ctx. draw( ) 

29. } 

30. } 

31. }, 

32. 月 

游戏 成 功效 果 如 图 12-17 所 示 。 
重新 开始 游戏 


修改 game. wxml 代码 ,为 “重新 开始 ”按钮 追加 自 定 义 
半数 的 点 击 事件 。 
WXML(pages/game/game. wxml) 代 人 码 片 段 修改 如 下 : 


< Vlew class = 'container'> 


< button tvype = 'warn' bindtap = 'restartGame'> 重 新 开始 </button > 
</view> 
在 game. js 文件 中 添加 restartGame 哨 数 ,用 于 重新 开始 游戏 。 
对 应 的 JS(pages/game/game.js) 代 码 片 段 添加 如 下 : 


1 
2 
3. 
4. <!-- “重新 开始 ?按钮 -~-> 
5 
6 


1. Pagel(lf{ 

和 / xx 

3. * 自 定义 函数 -- 重新 开始 游戏 
4. */ 

~ restartGame: function() { 

6. // 更 新 游戏 成 功 状态 

7. this. setData( {isWin:false})) 
8. // 打 乱 方 块 顺序 

9. this. shuffle() 

1 // 绘制 画布 内 容 

11. this. drawCanvas( ) 


12. }, 
13。 }) 


此 时 页 面 效 果 如 图 12-18 所 示 。 


图 12-18 重新 开始 游戏 效果 


12.6.1 应 用 文件 代码 展示 


app.json 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


1 
2. "pages": [ 

3. "pages/index/index", 

4, "pages/game/game" 

J. ] ， 

6. "window" : { 

了 . "navigationBarBackgroundColor": "#E64340", 
8. "navigationBarTitleText": "拼图 游戏 " 

9. } 

10. ] 


app. wxss 代码 展示 
app. wxss 文件 的 完整 代码 如 下 : 
1. /x* 页 面容 器 样式 */ 


2. .container { 
c height: 100vh; 


12. 


4 color: # E64340; 
5 font ~— weight: bold; 
6. display: flex; 
玫 flex— direction: column; 
8 align ~ items: center; 
9. Justify— content: space — evenly; 
10. } 
11. /7/* 顶 问 标题 样式 * / 
12. .title { 
13. font — size: l18pt.; 
1#4. |} 
. | ed 
6.2 页 面 文件 代码 展示 
首页 代码 展示 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


1. <Vlew class = “ContalneIT > 

人 <! 一 一 标题 -一 > 

3. <view class = 'title'> 游 戏 选 关 </Vview> 

4. 

5 风衣 一 

6 . <Vlew class= 'levelBox'> 

Ts < View Class = 'box' wx:for= '{{levels}}'wzx:key = 'levels{{index}}' bindtap = 'chooseLevel' 
data— level = '{{item}}'> 

8. < image src= '/images/{{item}}'></image> 
9. <text > 第 {1{findex+ 1}} 关 </text > 

10. </View> 

11. </view> 

12. 


13. </view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


1. /x* 关卡 列表 区 域 * / 

2. .levelBoxl{ 

3. width: 100 对 ; 

4. |} 

5. /x 单个 关卡 区 域 */ 

6. .boxf{ 

7. width: 50 名， 

8. float: left:; 

9. margin: 25rpx 0; 

10. display: flex; 

11. flex— direction: column; 
12, align ~ items: center; 
13. |] 

14. /< 选 关 图 片 */ 

15. imagel 

16. width: 260rpx; 

17. height: 260rpx; 

18. ] 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


1. Page({ 

2 / x 

3 < 页 面 的 初始 数据 

4. *x/ 

5. data: { 

6 levels: [ 

7 'pic01. jpg', 

8 "pic02. jpg', 

9. "Pic03. jpg', 

10. ‘pic04. jpg', 

11. ‘pic05. ]pg "， 

12. ‘pic06. jpg” 

13. ] 

14. Fa 

1 

16. /xx 

17. * 日 定义 函数 -- 游戏 选 关 
18. x*/ 

19. chooseLevel: function(e) { 
20. let level = e.currentTarget. dataset. level 
21. wx. navigateTol( { 

27. url: '../game/game?level = ' + level 
23. }) 

24. 要 

25。 }) 

游戏 页 代码 展示 


WXML 文件 (pages/game/game. wxml) 的 完整 代码 如 下 : 


<Vlew Class= “Contalner > 
<!-- 提示 图 区 域 -一 > 
<Vjiew class = 'title'> 提 示 图 </view > 
< image src= "'{{url}}'></image> 


<!-- 游戏 画布 -一 > 


< canvas canvas — jd = 'myCanvas' bindtouchstart = 'touchBox'></canvas > 


iD 必 Ue 捕 


<!-- “重新 开始 ”按钮 -一 > 


10. < button type = 'warn' bindtap = 'restartGame'> 重 新 开始 </button > 
11. </view> 


WXSS 文件 (pages/game/game. wxss) 的 完整 代码 如 下 : 
/ * 提示 图 样式 x / 


image { 
width: 250rpx; 
height: 250rpx; 


1 

2 

3 

4. 

5. |] 
6 

7. /7/* 夯 布 样式 */ 

8. canvas { 

9 border: lrpx solid; 
10. width: 300px; 

11. height: 300px; 


12. | 


JS 文件 (pages/game/game.]s) 的 完整 代码 如 下 : 


1. // 方 块 的 初始 位 置 
2. varnum = | 

3 ['00", '01°", "02 |]， 
4 | 110, "11, "12°"], 
35. 20 21 "22"| 
6. | 
和 

8 

9 

1 


// 方 块 的 宽度 
Varw = 100 
. // 图 片 的 初始 地 址 
0. var url = '/images/pic01. jpg' 
11. 
12. Page({ 
13. /x* 
14. * 页 面 的 初始 数据 
15. */ 
16. data: 1 
17. isWin:false 
18. }s 
19. /xx 
20. * 日 定义 函数 一 -绘制 画布 内 容 
21. x*x/ 
22. drawCanvas: function() { 
过 村。 let ctx = this. ctx 
24. 
25. // 清 空 画 布 
26 . ctx. clearRect(0, 0, 300, 300) 
27. 
28. // 使 用 双重 for 循环 绘制 3x3 的 拼图 
29. for (var i = 0; i<3; it+) { 
30. for (var j] = 0; j<3; j++)1 
31. if (num[i][j] '= '22') { 
32. // 获取 行 和 列 
3 var row = parseInt(num[ i][j] / 10) 
34. Var col = num[i][j|] % 10 
35. // 绘 制 方块 
36. ctx. drawImage(url, col x*xW, TOW XW, W, W, ] ¥Ww, i ¥xwW, WwW, WwW) 
37. } 
38. } 
39. } 
40. ctx. drawl ) 
41. }, 
A42. /x# 
43. * 日 定义 函数 -- 随机 打 乱 方块 顺 厅 
44. */ 


45. shuffle: function() { 
46. // 先 令 了 及 有 方块 回归 初始 位 置 


47. num = |[ 

48. [ "00', '01', '02'], 

49. "10", dr "12°], 

50. | "20", "21", "22"| 

51. ] 

52. // 记 录 当 前 空 日 方块 的 行 和 列 
53. Var row = 2 


54. Var Col = 2 


// 打 乱 方 块 顺序 100 次 

for (var i = 0; i< 100; i++) { 
// 随 机 产生 其 中 一 个 方 回 : 上 (0)、 下 (1), 左 (2)., 右 (3) 
Var direction = Math. round(Math. random() * 3) 
// 上 :0 
if (direction == 0) { 


// 空 日 方块 不 在 最 上 面 一 行 
if (row != 0) { 
// 交 换 位 置 
num| row][col] = num[row — 1|[coll] 
num[ row 一 1][col] = '22'" 
// 里 新 空 日 方块 的 行 
row 一 = 1 
} 
} 
FF 
else if (direction == 1) 1{ 
// 空 日 方块 不 在 最 下 面 一 行 
if (row != 2) { 
// 交 换 位 置 
num[row|l[col] = num[row + 1|]|[col| 
num[row + 1][col] = '22" 
// 更 新 空 日 方块 的 行 
row 十 = 1 
} 
} 
2 
else if (direction == 2) { 
// 空 白 方 块 不 在 最 左 侧 
if (col != 0) { 
// 区 换 位 置 
num[ row][col] = num[row|[col — 1] 
num[row|[col — 1|] = '22" 
// 里 新 空 日 方块 的 列 
col -= 1 
} 
} 
// 石 :3 
else if (direction == 3) { 
// 空 白 方块 不 在 最 右 侧 
if (col != 2) { 
// 交 换 位 置 
num[ row][col] = num[row][col + 1] 
num[ row][col + 1] = '22" 
// 里 新 空 日 方块 的 列 
col += 1 
} 
} 
} 
}, 
/ 尖 关 
x* 上 自 定义 函数 -点 击 方块 
x/ 


touchBox: function(e) { 


141. 


143. 


// 如 采 游 戏 已 经 成 功 , 不 做 任何 操作 
1f (this. data. ISWIn) 1 


return 


} 

// 获 取 币 点 击 的 坐标 工 和 Y 
Var x = e.changedTouches[0|.x 
var yY = e,.CchangedTouches[0|.y 
// 换 算 成 行 和 列 


var row = parselInt(y / w) 


Var col = parselInt(x / w) 
// 如 果 点 击 的 不 是 空 日 位 置 
if (num[row][col] != '22') { 

// 尝 试 移动 方块 

this. moveBox(row, col) 

// 重 新 绘制 画布 内 容 

this. drawCanvasl ) 

// 判 断 游戏 是 否 成 功 

if (this. isWin()) { 


} 
} 
}, 


/ ¥¥ 


let ctx = this. ctx 

// 绘 制 完整 图 片 

ctx. drawImage(url, 0, 0) 

// 绘 制 文字 提示 

ctx. setFillStvyle('# E64340°') 

ctx. setTextAlign( 'center') 

ctx. setFontSize(60) 

ctx. fillText( ' 游 戏 成 功 ',，150,，150) 
ctx. drawl ) 


* 目 定义 函数 -移动 锌 点 击 的 方块 


*/ 


moveBox: function(i, j) { 


// 情 况 1: 如 果 被 点 击 的 方块 不 在 最 上 方 ,检查 可 否 上 移 


if (i>0) { 
// 如 果 方 块 上 方 是 空 日 
if (num[i - 1][j] == '229 { 
// 交换 方块 与 空白 的 位 置 


num[i - 1][j] = num[i][j] 
num[ i][j] = '22' 


return 
} 
} 
// 情 况 2: 如 果 被 点 击 的 方块 不 在 最 下 方 ,检查 可 否 下 移 
if (i<2)1 
// 如 采 方 块 下 方 是 空 日 
if (num[i + 1][j] == '22') { 
// 交 换 方 块 与 空 日 的 位 管 


} 


num[1I + 1][j] = nunm[1][j] 
num[ i][j] = '22， 
return 


165. } 


167.  // 情 况 3: 如 果 被 点 击 的 方块 不 在 最 左边 ,检查 可 否 左 移 
168. if (j > 0)1 
169. // 如 果 方 块 左 边 是 空 日 


170. if (num[i][j - 1] == '22') { 
171. // 交 换 方 块 与 空 日 的 位 置 
172. num[i][j -= 1] = num[i][]j] 
173. num[ i][j] = '22， 

174. return 

175. } 

176. } 

177. 


178. // 情 况 4: 如 果 被 点 击 的 方块 不 在 最 右边 ,检查 可 否 右 移 
179. if (Jj < 2) { 
180. // 如 果 方 块 右边 是 空 日 


181. if (num[i][j + 1] == '22') { 
182. // 区 损 方 块 与 空白 的 位 置 
183. num[i]l[j + 1] = num[i][j] 
184. num[i][j] = '22， 

185. return 

186. } 

187. } 

188. 所 

189. 

190. /a#x¥ 

191.  ¥* 月 定义 函数 -判断 游戏 是 否 成 功 
192. x 


193. isWin: function() { 
194. // 使 用 双重 for 循环 裔 历 整 个 数组 


195. for (var i = 0; i<3; i++) { 

196. for (var ] = 0; j <3; j++) { 

197. // 如 果 有 方块 位 置 不 对 

198. if (num[i][j] '= i *10 + j)f 
199. // 返 回 false, 表示 游戏 尚未 成 功 
200 . return false 

201. } 

202. } 

203. } 


204， // 更 新 游戏 成 功 状态 
205. this. setDatal( {isWin:true}) 
206. // 人 返回 true, 表示 游戏 成 功 


207. return true 

208. |}, 

209. 

210. /xx 

211.  ¥* 自 定义 函数 -- 重新 开始 游戏 
212. */ 


213. restartGame: function() { 

214. // 更 新 游戏 成 功 状 态 

215. this. setDatal(l {isWin:false}) 
216. // 打 乱 方 块 顺 序 

217. this. shufflel( ) 

218. // 绘 制 画 布 内 容 

219 . this. crawCanvas( ) 


220. 外 


和 

222. / ¥¥ 

223. < 生命 周期 图 数 -- 监听 页 面 加 载 
224. x / 


225. onLoad: function(options) { 
226. // 更 新 图 片 路 径 地 址 


221. url = '/images/' + options. level 

228. // 里 新 提示 图 的 地 址 

229. this. setDatal {url:url}) 

230. // 创 建 画 布 上 下 文 

231. this.ctx = wx. createCanvasContext( 'myCanvas') 
大 // 打 乱 方块 顺序 

233, this., shufflel( ) 

234. // 绘 制 画 布 内 容 

235 . this. drawCanvas( ) 

236. 上 


小 程序 游戏 . 推 种 子 游戏 


在 学 习 了 < canvas >( 男 布 ) 组 件 和 小 程序 界面 API 中 绘图 的 相关 用 法 以 后 ,读者 不 妨 尝 试 


。 综合 应 用 所 学 知识 创建 完整 的 推 箱子 游戏 项 目 ; 
。 熟练 掌握 < canvas > 组 件 和 绘图 API。 


rt 
本 项 目 一 共 需 要 两 个 页 面 , 即 首 页 和 游戏 页 面 ,其 中 首页 用 于 呈现 关卡 菜 国 碎 项 周 


单 ,点 击 对 应 难度 的 关卡 后 进入 游戏 画面 。 视频 讲解 
13.1.1 首页 功能 需求 
首页 功能 需求 如 下 : 


(1) 痛 丰 需要 包含 标题 和 关卡 列表 。 
(2) 关卡 至 少 要 有 4 个 关卡 选项 ,每 个 关卡 显示 预览 图 片 和 第 几 关 。 
(3) 点 击 关 卡 列 表 可 以 打开 对 应 的 许 戏 画面 。 


13.1.2 游戏 页 功能 需求 


游戏 页 功能 十 求 如 下 : 

(1) 游戏 页 面 需 要 显示 第 几 关 、 游 戏 画 面 、 方 向 键 和 “重新 开始 ”按钮 。 

(2) 点 击 方 品 键 可 以 使 游戏 主角 自行 移动 或 推动 箱子 前 进 。 

(3) 游戏 画面 由 8X8 的 小 方块 组 成 ,主要 包 插 地板、 围墙 \ 箱 子 \ 游 戏 主角 和 目的 地 。 
(4) 点 击 “ 重 新 开始 ”按钮 可 以 将 箱子 和 游戏 主角 回归 初始 位 置 并 重新 开始 游戏 。 


9°132 项 目 创建 


本 项 目 创建 选择 空 魏 文件 来 boxGame:, 效 果 如 图 13-1 所 示 。 Fn 
单 击 * 新 建 ? 按 钮 完成 项 目 创建 ,然后 准备 手动 修改 页 面 配置 文件 。 视频 讲解 


sa 


| boxGame 
EWwwxdemo_workspace\boxGame 


, wx19079110a0iD1e8a 
者 无 AppiD 可 注册 
或 使 用 测试 号 
| 小 程序 
O 不 使 用 云 服务 
[小 程序 : 云 开发 
建 服务 露 ， 使 用 平台 提供 的 API 进行 核心 业务 开发 ， 即 可 实现 小 程序 快速 上 等 和 
千代 。 了 解 详情 
“腾讯 云 


JavaScript 


图 13-1 小 程序 项 目 填写 效果 示意 图 


13.3.1 创建 页 面 文件 


项 目 创建 完毕 后 ,在 根 目录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 一 般 来 说 首页 黑 
认命 名 为 index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 称 可 以 自 定义 。 本 项 目 有 两 个 页 
面 文件 ,需要 创建 index( 首 页 页 面 ) 和 game( 游 戏 页 面 )。 

具体 操作 如 下 : 

(1) 将 app. json 文件 内 pages 属性 中 的 “pages/logs/logs” 改 成 "pages/ygame/ygame”。 

(2) 按 快捷 键 Ctrl 十 S 保存 修改 后 会 在 pages 文件 夹 下 自动 生成 game 目录 。 


13.3.2 删除 和 修改 文件 


具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 自 
动 补 全 函数 (如 图 13-2 所 示 )。 

(5) 删除 app. wxss 中 的 全 部 代码 。 


index.js 者 


fiindex.js 


tunction 0 


[9 - ] 
getCurrentPages 

BS package 

Pp pauseBackgroundAudio 
J previewImage 

A canvasPutImageData 


13-2 输入 关键 词 创 建 Page 函数 
(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 自动 
补 全 国 数 (如 图 13-3 所 示 )。 
app.|S 各 


1 /fapp.js 
2 ap 


Function 0 


13-3 ”输入 关键 词 创建 App 函数 


13.3.3 创建 其 他 文件 


接 下 来 创建 其 他 自 定 义 文件 ,本 项 目 还 需要 以 下 两 个 文件 夹 。 
。 images: 用 于 存放 图 片 素材 ; 

。 utils: 用 于 存放 公共 JS 文件。 

单 击 目录 结构 左上 角 的 十 号 创建 文件 夹 ,并 分 别 命 名 为 images 和 utils。 
添加 图 片 文件 

本 项 目 将 在 首页 中 用 到 4 幅 关 卡 图 片 ,图 片 素材 如 图 13-4 所 示 。 

右 击 目录 结构 中 的 images 文件 夹 ,选择 “硬盘 打开 ”, 将 图 片 复 制 .粘贴 进去 。 
此 外 还 需要 在 游戏 页 面 中 用 到 5 个 游戏 图 标 系 材 , 如 图 13-5 所 示 。 


(b) level02.png 
图 13-4 关卡 图 片 素材 展示 


(a) levelO1.png 


(a) bird.pne (b) box.png 


(d) pig.png (8) stone.png 


图 13-5 ”游戏 方块 图 标 素材 展示 


右 击 目录 结构 中 的 images 文件 夹 ,选择 “ 便 盘 打开 ”, 新 建 二 级 文件 夹 icons, 然 后 将 全 部 


图 标 素 材 复制 .粘贴 进去 。 
创建 公共 JS 文件 


右 击 utils 文件 夹 ,选择 "新建 > 一 JS, 输 入 data 后 按 回 车 键 创建 公共 文件 data. ]S， 如 


图 13-6 所 示 。 


全 部 完成 后 的 目录 结构 如 图 13-7 所 示 。 


十 以 


# [Dimages 
bk [0 pages 
DO vt 
Js | ”硬盘 打开 


{} 重 命名 


口 目录 
Page 


Component 


新 建 JS 文 件 


图 13-6 新建 JS 文件 


十 已 


kb [站 imiag0eS 
T [后 pages 
加 game 
J]5 game.s 
{} game json 
< » game.waml 
ws QAaMe.Wnss 
下 [SS index 


js indexjs 
{} index json 
< index wml 


wns imdexWXSS 
- Bs utils 
J3 datajs 
J9 app. 幅 
{} app.json 
ws APD.WXSS 
{a} project.config.json 


图 13-7 全 部 文件 创建 完成 


此 时 文件 配置 就 全 部 完成 ,13.4 节 将 正式 进行 页 面 布局 和 样式 设计 。 


微 信 小 程序 开发 实战 - 微 课 视频 版 tSJO 


13.4.1 导航 栏 设计 


小 程序 默认 导航 栏 是 黑 底 白字 的 效果 ,可 以 通过 在 app. json 中 对 光 溃 沧 渤 
window 属性 进行 重新 配置 来 自 定义 导航 栏 效果 。 更 改 后 的 app. json 文件 代 四 中 


人 码 如 下 : 饮 频 讲解 
1. 1 
2 "pages" : [代码 略 ]， 
3. "window : { 
4. " navigationBarBackgroundColor": " # E64340", 
5。 "navigationBarTitleText":" 推 箱子 游戏 " 
6. } 
7. } 


上 述 代码 可 以 更 改 导 航 栏 背景 色 为 珊瑚 红色 .字体 为 白 
色 , 效 果 如 图 13-8 所 示 。 


13.4.2 页 面 设计 


公共 样式 设计 
自 先 在 app. wxss 中 设置 页 面容 具 和 顶 冰 标 题 的 公共 样式 ,代码 如 下 : 


1 /* 页 面容 器 样式 * / 
2 .Container 1 

3 height: 100vh; 

4. color: # E64340; 
5. font — weight: bold; 
6 

了 

8 

9 


display: flex; 

flex— direction: column; 

align— items: center; 

Justify— content: space ~ evenly; 
10. }]} 
11. /* 顶 问 标题 样式 * / 
12. .title { 

13. font 一 size: 18Ppt， 
14. } 


首页 设计 

自 页 主要 包含 两 部 分 内 容 , 即 标题 和 关卡 列表 ,页 面 设计 如 图 13-9 所 示 。 
计划 使 用 如 下 组 件 。 

。 顶 闪 标题 : < view > 容 前 ; 

。 关卡 列表 : < view > 容 天 ,内 部 使 用 数组 循环 。 
WXML(pages/index/index. wxml) 代 但 如 下 : 


1 < Vlew Class= 'container'> 

2 <! 一 一 标题 -一 > 

3. < View class = 'title'> 游 戏 选 关 </view> 
4 


5 ci 一 关卡 列表 -一 > 

<Vlew ClLass = "levelBox'> 

7. <Vlew Class= ‘box'> 

8 < image src = '/images/level0]1. png'></ image > 
9. < text > 第 1 关 </text > 

10. </view> 

11. </view > 

12. 


13. </view> 
相关 WXSS(pages/index/index. wxss) 代 码 片 段 如 下 ， 


/x* 关卡 列表 区 域 * / 
. levelBox | 

width: 100%. 
} 


/x* 单个 关卡 区 域 * / 
.box { 
width: 5 对 ; 
float: left,; 
margin: 20rpx 0; 
display: flex; 


iD C0] 


睛 。 睛 ， 
> 


上 
ho 


flex— direction: ColLumn， 


上 
Ly) 


align ~ items: center; 


} 


Pp 
nn 


. /* 选 关 图 片 */ 
image { 
width: 300rpx; 
height: 300rpx; 
} 


当前 效 朱 如 图 13-10 所 示 。 


S| 


13-9 ”首页 设计 图 


午 和 击 生硬 击 ea = 


13-10 ”首页 效果 图 


由 图 可 见 , 此 时 可 以 显示 标题 和 一 个 临时 关卡 。 巾 于 疝 
未 获得 关卡 数据 ,所 以 暂时 无 法 显示 完整 的 关卡 列表 , 仪 供 

游戏 页 面 设计 

游戏 页 面 需 要 用 户 点 击 和 站 页 的 关卡 列 
表 , 然 后 在 新 窗口 中 打开 该 页 面 。 游戏 页 面 RE- 
包括 游戏 关卡 标题 .游戏 画面 .方向 键 和 * 重 加 ws 
新 开始 ”按钮 ,页 面 设计 如 图 13-11 所 示 。 说 虎 讲解 

由 于 暂时 没有 做 点 击 跳 苇 的 人 逻辑 设计 ,所 以 可 以 在 开发 
工具 顶端 选择 “普通 编 详 ”下 的 “添加 编 详 模 式 ”, 并 携 市 临时 
测试 参数 level= 二 0, 如 图 13-12 所 示 。 

此 时 预览 就 可 以 直接 显示 game 页 面 了 ,设计 完毕 后 再 
改 回 “普通 编译 ”模式 即 可 重新 显示 首页 。 

计划 使 用 如 下 组 件 。 

。 < view >: 整体 容器 和 顶端 标题 ; 

。 < 之 canvas >: 游戏 辆 布 ; 


”| 下 次 编译 时 模拟 更 新 ( 需 1.9.90 及 以 上 基础 库 版 本 ) 


。 < button >: 4 个 方 回 键 和 1 个 “重新 开始 ?按钮 。 
WXML(pages/game/game. wxml) 代 人 码 如 下 : 
< VlIew Class= Contalner > 


<! 一 关卡 提示 -一 > 


<view class = 'title'> 第 1 关 </view> 


1 
2 
3 
4. 
- <! 一 一 游戏 画布 -一 > 
6 < canvas canvas — jd = 'myCanvas'></canvas > 
7 
8 


. <! 一 一 方向 键 -- 一 > 
9. < VlIew Class= ‘btnBox'> 
10. < button type = 'warn'> 个 </button > 
11. < VIEW > 
12. < button type = 'warn'><</button > 
13. < button type = 'warn'> y </button > 
14. < button type = 'warn'>—></button > 
2 </view> 


16. </view> 


(画布 ) 


“重新 开始 ”按钮 


图 13-11 游戏 页 面 设计 图 


取消 
13-12 添加 game 页 面 的 编译 模式 


17 

18. <!-- “重新 开始 ”按钮 -一 > 

19 . < button type = 'warn'> 重 新 开始 </button > 
20. </view > 


WXSS(pages/game/game. wxss) 代 人 码 如 下 . 


1. /x* 游戏 画布 样式 */ 
2. canvas { 

3 border: lrpx solid; 
4. width: 320px; 
ys height: 320px; 
6. |] 

7 

8 


. /* 方 回 键 按钮 整体 区 域 * / 
9. .btnBox { 
10. display: flex; 


11. flex— direction: column; 
12. align— items: center:; 

13. } 

14. 


15. /* 方 向 键 按钮 第 二 行 * / 
16. .btnBox view { 

17. display: flex; 

18. flex— direction: row; 
19， |} 

20. 

21. /¥* 所 有 方 回 键 按钮 </ 
22. .btnBox button { 

23， width: 90rpx; 

24. height: 90rpx; 

25. | 

26. 

27. /* 所 有 按钮 样式 */ 
28. button { 

29 . margin: 10rpx; 

30. | 


当前 效 朱 如 图 13-13 所 示 。 

由 疼 可 见 , 此 时 可 以 显示 完整 样式 效 末 。 由 于 疝 未 获得 久 戏 数据 ,所 以 销 时 无 法 根据 用 户 
点 击 的 关卡 入 口 显 示 对 应 的 游戏 内 容 , 仅 供 作 为 样式 参考 。 

此 时 页 面 布局 与 样式 设计 就 已 完成 ,13. 5 节 将 介绍 如 何 进行 逻辑 处 理 。 


图 13-13 ”游戏 页 面 效 果 图 


13.5.1 公共 逻辑 
在 公共 JS 文件 (utils/ data.js) 中 配置 游戏 地 图 的 数据 ,代码 如 下 : 


1 //========================================================= 
2. // 地 图 数据 map1 一 map4 

3 // 地 图 数据 : 1 为 墙 、2 为 路 ,3 为 终点 、4 为 箱子 .5 为 人 物 、0 为 墙 的 外 围 
4. 


27. 


这 里 分 别 使 用 mapl 一 map4 代表 4 个 不 同 关 卡 的 地 图 数据 ,以 二 维 数组 的 形式 存放 。 当 
前 地 图 均 由 8X8 的 方 格 组 成 ,每 个 位 置 的 数字 代表 对 应 的 图 标 素材 。 

当前 地 图 数据 和 图 片 素 材 仅 供 参 考 , 开 发 者 也 可 以 自行 修改 游戏 布局 和 图 片 。 

然后 需要 在 data. js 中 使 用 module. exports 语句 暴露 数据 出 口 ,代码 片段 如 下 : 
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module. exports = { 


} 


maps: [mapl, map2, map3, map4| 


现在 就 完成 了 公共 逻辑 处 理 的 部 分 。 
最 后 需要 在 game 页 面 的 JS 文件 顶端 引用 公共 JS 文件 ,引用 代码 如 下 : 


var data = require('../../utils/data. js') /7 引用 公共 JS 文件 


雷 要 注意 小 程序 在 这 里 暂时 还 不 文 持 绝对 路 径 引 用 ,只 能 使 用 相对 路 径 。 


13.5.2 首页 逻辑 


转 , 雷 要 衣 和 匈 为 天 卡 列 表 项 目 添加 扣 击 事件 。 


首页 主要 有 两 个 功能 需要 实现 ,一 是 展示 关卡 列表 ; 二 是 点 击 图 厂 能 跳 转 到 游戏 页 面 。 
关卡 列表 展示 

在 JS 文件 的 data 中 录入 关卡 图 片 的 数据 信息 ,这 里 以 4 个 关卡 为 例 。 
相关 JSCpages/index/index. js) 代 码 片 段 如 下 : 


1. Page({ 

二 / 兴 兴 

3. * 页 面 的 初始 数据 
4. x 

= data: { 

6. levels: [ 

7. ‘level01.png ， 
8. ‘level02.png', 
9. 'level03.png', 
10. ‘level04. png' 
11. ] 

12. Fs 

13. }) 


扶 大 为 关卡 对 应 的 < view > 组 件 添加 wx:for 属性 循环 显示 关卡 列表 数据 和 图 片 。 
修改 后 的 WXML(pages/index/index. wxml) 代 码 如 下 : 


1. <vView Class = 'container'> 

2 <! 一 一 标题 -一 > 

了 刘 < View class = 'title'> 游 戏 选 关 </view> 

4. 

5. <!-- 关卡 列表 -一 > 

6 . <Vlew Class= ‘levelBox'> 

Ts < View Class = 'box' wx: for = '{{levels}}' wx: key = 
'Jevels{{index}}'> 

8. < image src= '/images/{{item}}'></image > 
9. < text > 第 {f{findex + 1}} 关 </text > 

10. </view > 

11. </vView> 

12. 


13. </view> 


此 时 页 面 效 果 如 图 13-14 所 示 。 
点 击 跳 转 游 戏 页 面 
大 希望 用 户 点 击 关 卡 图 片 即 可 实现 跳 


相关 WXML (pages/index/index. wxml) 


代码 片段 修改 如 下 : 图 13-14 首页 关卡 列表 展示 


<Vlew Class= 'container'> 
<!- 一 标题 -> 
< View class = 'title'> 游 戏 选 关 </view> 


<! 一 关卡 列表 -一 > 

<Vlew Class= ‘levelBox'> 

| < View class = 'box' wx:for= '{{levels}}' wx:key = 'levels{{index}}' bindtap = 'chooseLevel' 
data - level = '{{index}}'> 


1 
2 
3 
4. 
3 
6 
7 


8. < image src = '/images/{{item}}'></image> 
9. < text> 第 {{index + 1}} 关 </text > 

10. </view> 

11. </view> 

12. 


13. </view> 


上 述 代 码 表 示 为 关卡 添加 了 自 定义 点 击 事件 函数 chooseLevel, 并 且 使 用 data-level 属性 


携带 了 关卡 图 片 下 标 信息 。 


然后 在 对 应 的 index. js 文件 中 添加 chooseLevel 函数 的 内 容 ,代码 片段 如 下 : 


1. Page({ 

2 / ¥x 

3 * 自 定义 函数 -- 游戏 选 关 
4 关子 

5 chooseLevel: function(e) { 
6. let level = e.currentTarget. dataset. level 
7 wx. navigateTol( { 

8 url: '../game/game?level =' + level 
9. }) 
10. }， 
11. }) 


此 时 已 经 可 以 点 击 跳 转 到 game 页 面 ,并 且 成 功 携带 了 关卡 图 片 数 据 , 但 是 仍 需 在 game 


页 面 进行 携带 数据 的 接收 处 理 才 可 显示 正确 的 游戏 画面 。 
13. 5.3 游戏 页 逮 辑 


需要 在 游戏 页 面 接收 关卡 信息 ,并 显示 对 应 的 图 片 内 容 。 


游戏 页 主要 有 以 下 几 个 功能 需要 实现 : 

。 显 示 当前 是 第 几 关 ， 

。 游 戏 地 图 的 绘制 ; 

。4 个 方向 键 可 以 移动 游戏 主角 ; 

。 点 击 “ 重 新 开始 ”按钮 可 以 使 游戏 地 图 还 原 成 最 初 状态 。 

显示 当前 第 几 关 

在 首页 逻辑 中 已 经 实现 了 页 面 跳 转 并 携带 了 关卡 对 应 的 图 片 信息 ,现在 


相关 JSCpages/ygameygame. js) 代 码 片 段 如 下 


1. Page({ 

p / x 

3. x 页 面 的 初始 数据 
4. x 

5 data: { 


6 . level: 1 

7. er 

8. / x 

9. *x 生命 周期 函数 -监听 页 面 加 载 
10. x 


11. onLoad: function(options) { 


和 // 获 取 关 卡 


Ld let level = options. level 
14. // 更 新 页 面 关 卡 标题 

5 this. setDatal { 

16. level: parseInt(level)+1 
17. }) 

18. 1}, 

19. 月) 


修改 WXML(pages/game/game. wxml) 代 码 片 段 如 下 : 


<Vlew class = 'container'> 
< 一 关卡 提示 一 一 > 


< View class = 'title'> 第 {{level}} 关 </view> 


HAODNp 


cs 

此 时 重新 从 痛 页 点击 不 同 的 关卡 图 片 跳 转 就 可 以 发 现 
已 经 能 够 正确 显示 对 应 的 内 容 了 。 

运行 效果 如 图 13-15 所 示 。 


游戏 逻辑 实现 

1) 准备 工作 

首先 在 game. js 文件 的 顶端 记录 一 些 洲 
戏 初 始 数据 信息 。 rE 

对 应 的 JS(pages/game/game. js) 代码 视频 讲解 
片段 添加 如 下 ; 

1. // 地 图 图 层 数据 

2. varmap = | 

3. [0; O07 O05 O00 0 0 0, 01], 

4. [0 0 0 Dy OQ Di OS 

5D. L007 0 0 0 0 0 0 

6 . 10, 0 0 0, 0 0 0, 0], 

可 ED 

8. 0 0 0 0 0 0 0 01， 

9 . [0, 0, 0, 0, 0 0, 0, 01], 

10. [0, 0, 0, 0, 0, 0, 0, 0| 

11. | 13-15 ”首页 列表 中 的 选 关 效果 


12. // 和 箱子 图 层 数据 
13. Var box = | 


14. [0, 0, 0, 0, 0, 0, 0, 0], 
15. [0, 0, 0, 0, 0, 0, 0, 0], 
16. [0, 0, 0, 0, 0, 0, 0, 0], 
17. [0, 0, 0, 0, 0, 0, 0, 0], 
18. [0, 0, 0, 0, 0, 0, 0, 0], 
19. [0, 0, 0, 0, 0, 0, 0, 0], 
20. [0, 0, 0, 0, 0, 0, 0, 0], 
21. [0, 0, 0, 0, 0, 0, 0, 0] 


始 数据 中 。 


23. // 方 块 的 宽度 


24. var w = 40 


25. // 初 好 化 游戏 主角 (小 岛 ) 的 行 与 列 


0 
0 


26. Var row 


27. var col 
29. Page{{ 
31. 月 


2) 初 如 化 游戏 画面 
首先 需要 根据 当前 是 第 几 关 读 取 对 应 的 游戏 地 图 信息 ,并 更 新 到 游戏 初 、 向 中 
= 


在 game. js 文件 中 添加 initMap 函数 ,用 于 初始 化 游戏 地 图 数据 。 
对 应 的 JS(pages/game/game.js) 代 码 片 段 添 加 如 下 : 


I 视频 讲解 
2 / x 

3 *x 目 定 义 图 数 -- 初 始 化 地 图 数据 
4 关 1 

5 . initMap: function(level) { 

6 // 计 取 原 始 的 游戏 地 图 数据 

7 let mapData = data. maps|[ Level | 
8 // 使 用 双重 for 循环 记录 地 图 数据 
9 . for (var i = 0; i<8; i++) { 
10. for (var j] = 0; j <8; j++) { 
11. box[il[j] = 0 

12. map[ i][j] = mapDatali][j] 
13. 

14. if (mapData[i][j] == 4) { 
15. box[i][j|] = 4 

16. map[i][j] = 2 

17. } else if (mapData[i][j] == 5) { 
18. map[i][j] = 2 

19. // 记 录 小 鸟 的 当前 行 和 列 
20. row = 1 

21. col = ] 

22. } 

w | 

24. } 

J Ps 

26. }) 


上 述 代 码 首 先 从 公共 盟 数 文件 data. js 中 读 取 对 应 关卡 的 游戏 地 图 数据 ,然后 使 用 双重 


for 循环 对 每 一 块 地 图 数据 进行 解析 ,并 更 新 当前 游戏 的 初始 地 图 数据 、 箱 子 数据 以 及 游戏 主 
角 ( 小 咏 ) 的 所 在 位 置 。 


然后 在 game. js 中 添加 自 定义 函数 drawCanvas ,用 于 将 地 图 信息 绘制 到 画布 上 。 
对 应 的 JSCpages/ygamey/ygame. js) 代 码 片 段 添 加 如 下 : 


1. Page({ 

2. /xx 

3. < 月 定义 函数 -绘制 地 图 
4 */ 

5 drawCanvas: function() { 


6 . let ctx = this.ctx 

了 /7 清空 画布 

8. ctx. clearRect(0, 0, 320, 320) 

9. // 使 用 双重 for 循环 绘制 8x8 的 地 图 

10. for (var i = 0; i<8; i++) { 

11. for (varj = 0; j <8; j++) { 

12. // 上 默认 是 道路 

1]3. let img = "ice'’ 

14. if (map[i][j] == 1) { 

15. lmg = “Stone 

16. } else if (map[i][j] == 3) { 

17. lmg = 'p1g' 

18. } 

19. 

20. // 绘 制 地 图 

21. ctx. drawImage( '/images/icons/' + img + '.png', J] ¥ w, i ¥ Ww, w, w) 
22. 

23. if (box[i][j|] == 4) 1 

24. // 合 加 绘制 箱子 

25. ctx. drawImage( '/images/icons/box.png', ] * w, i x* w, w, Ww) 
26. } 

27. } 

28. } 

29. 

30. // 合 加 绘制 小 马 

31. ctx. drawImagel( '/ images/icons/bird. png', col 关 W TOW *% WwW, W, WwW) 
32. 

和 ctx. drawtf ) 

34. }, 

35. 月 


最 后 在 game. js 的 onLoad 函数 中 创建 画布 上 下 文 ,并 依次 调用 自 定义 函数 initMap 和 
drawCanvas。 对 应 的 JS(pages/game/ game.js) 代 人 码 片 段 添 加 如 下 : 


1. Pagel{ 

2. * 生命 周期 靖 数 一- 监听 页 面 加 载 
二 关 / 

4. onLoad: function(options) { 

5. // 获 取 关 卡 

// 更 新 页 面 关 卡 标题 

9. // 创 建 画 布 上 下 文 

10. this.ctx = wx. createCanvasContext( 'myCanvas') 
了 // 初 始 化 地 图 数据 

12. this. initMap( level) 

13. // 绘制 画布 内 容 

14. this. drawCanvas( ) 

15. }, 

16. }) 


当前 效果 如 图 13-16 所 示 。 

3) 方向 键 逻 辑 实 现 

修改 game. wxml 页 面 中 的 4 个 方 回 键 
<button > ,为 其 绑 定 点 击 事件 。 


图 13-16 绘制 地 图 效果 


WXML(pages/game/game. wxml) 代 但 修改 后 如 下 : 


1. <view class= Contalner > 

<! 一 一 关卡 提示 (代码 略 ) -一 > 

C 

4. <! 一 -游戏 画布 ( 代 公 上 略 ) -一 > 

5 

6. <! 一 一 方向 键 ---> 

7. <Vlew Class = 'btnBox'> 

8. < button type = 'warn' bindtap = 'up'> + </button > 

9. < VIeW > 

10. < button type = 'warn' bindtap = 'left'><—</button > 
11; < button type = 'warn' bindtap = 'down'> y </button > 
12. < button type = 'warn' bindtap = 'right'>—></button > 
13. </view> 

14. </view> 

5 


16. <!-- “重新 开始 ?按钮 (代码 略 ) -一 > 

17. </view> 

在 game. js 文件 中 添加 目 定 义 函 数 up、down,left 和 right, 分 别 用 于 实现 游戏 主角 (小 马 ) 
在 上 .下 左右 4 个 方向 的 移动 ,每 次 点 击 在 条 件 允 许 的 情况 下 移动 一 格 。 

对 应 的 JSCpages/gameygame. js) 代 码 片 段 添 加 如 下 : 


1. Page({ 

2. f/f 关 关 

* 目 定 义 困 数 -一方 向 键 : 上 

4. x*/ 

5. up: function() { 

6. // 不 在 最 顶端 才 考虑 上 移 

7. if (row> 0) { 

8. // 如 条 上 方 不 是 坪 或 箱子 ,可 以 移动 小 鸟 
9. if (map[row — 1][col] != 1 && box[row - 1][col] != 4) { 
10. // 里 新 当前 小 乌 的 坐标 

11. row = row 一 1 

12. } 

3 // 如 果 上 方 是 箱子 

14. else if (box[row — 1][col] == 4) { 
15. // 御 子 不 在 最 项 端 才 能 考虑 推动 

16. if (row 一 1>0) { 

17. // 如 果 箱 子 上 方 不 是 墙 或 箱子 

18. if (maplrow — 2|][coll| != 1 &é& box[row — 2][col] != 4) { 
L9, box[row — 2][col] = 4 

20. box[row — 1][col] = 0 

21. // 更 新 当前 小 乌 的 坐标 

22. row = row 一 1 

" } 

24. } 

29. } 

26. // 重 新 绘制 地 图 

2 了 7. this, drawCanvas( ) 

28. } 

29. Ts 

30. /xx 


3 * 目 定 义 图 数 -- 方 向 键 : 下 


32 . 
33. 
34. 
35. 
36. 
本 了 
38. 
39. 
40. 
41. 
42. 
43. 
44. 
45. 
46 . 
47. 
48. 
49 . 
30. 
51. 
了 4， 
53. 
54. 
ee 
56. 
57 . 
58. 
59. 
60. 
61. 
62. 
6b3. 
64. 
65. 
be6. 
67. 
68. 
69. 
7 了 0. 
71. 
72. 
上 
74. 
75. 
76. 
77. 
78. 
79 . 
80. 
81 . 
82 . 
83. 
84. 
85. 
86. 


x/ 
down: function() { 
// 不 在 最 底 问 才 考 虑 下 移 
if (row<7) { 
// 如 末 下 方 不 是 墙 或 箱子 ,可 以 移动 小 鸟 
if (map[row + 1]1[col] = 1 && box[row + 1][coll] '= 4) { 
row = row + 1 
} 
// 如 果 下 方 是 箱子 
else if (box[row + 1][col] == 4) { 
// 箱 于 不 在 最 底 病 才能 考 夸 推动 
if (row + 1<7){ 
// 如 条 箱 了 于 下 方 不 是 坪 或 箱子 
if (maplrow + 2|[col| !'= 1 && box[row + 2|][coll] '= 4) 1{ 
box[row + 2][col] = 4 
box[row + 1l][col] = 0 
row = IOW + 1 
} 
} 
} 
// 重 新 绘制 地 图 
this. drawCanvas!( ) 
| 
}, 
/ x 
* 目 定 义 图 数 -一 方向 键 : 左 
x/ 
left: function() 1 
// 不 在 最 左 侧 才 考虑 左 移 
if (col>0) { 
// 如 采 左 侧 不 是 场 或 箱子 ,可 以 移动 小 乌 
if (map[row|[col — 1|] '= 1 && box[row|[col - 1] '= 4) 1{ 
// 喝 新 当前 小 乌 的 坐标 
col = col -1 
} 
// 如 果 左 侧 是 箱子 
else if (box[row|l[col - 1|] == 4) { 
// 箱 子 不 在 最 左 侧 才 能 考虑 推动 
if (col 一 1>0)f 
// 如 果 箱 子 左 侧 不 是 载 或 箱子 
if (maplrowjlcol — 2|] '= 1 && box[row|l[col - 2] !'= 4) 1 
box[row|l[col —- 2|] = 4 
box[row|[col ~- 1] = 0 
// 更 新 当前 小 马 的 坐标 
col = col -1 
} 
} 


| 
// 重 新 绘制 地 图 
this. drawCanvasl ) 
} 
}, 
/ x 


113. 
114. |}) 


当前 效果 如 图 13-17 所 示 。 


* 明定 义 函数 -方向 键 : 石 


*/ 


right: function() 1{ 


}, 


// 不 在 最 右 侧 才 考 虑 右 移 
if (col<7) 1{ 


// 如 采 右 侧 不 是 墙 或 箱子 ,可 以 移动 小 乌 
if (maplrow]l[col + 1] '= 1 && box[row|[col + 1] '= 4) 1{ 
// 更 新 当前 小 乌 的 坐标 
col = col + 1 
} 
// 如 果 右 侧 是 箱子 
else if (box[row|[col + 1] == 4) { 
// 箱 于 不 在 最 右 侧 才能 考虑 推动 
if (col + 1<7)1{ 
// 如 果 箱 子 右 侧 不 是 墙 或 箱子 
if (map[row|[col + 2|] != 1 && box[row|[col + 2] '= 4) { 
box[row|l[col + 2] = 4 
box[row][col + 1] = 0 
// 更 新 当前 小 乌 的 坐标 
col = col + 1 
} 
} 
} 
// 重 新 绘制 地 图 
this. drawCanvas( ) 


(a) 门 上 移动 歼 林 (b) 向 右 移动 效果 
13-17 ”游戏 主角 (小 鸟 ) 的 移动 效果 


判断 游戏 成 功 
在 game. js 文件 中 添加 自 定义 函数 isWin ,用 于 判断 游戏 是 否 已 经 成 功 。 
对 应 的 JS(pages/game/ game. js) 代 码 片 段 添 加 如 下 : 


1. Pagelf 

只 / x 

3 * 自 定义 函数 -- 判断 游戏 是 否 成 功 

4 x*x/ 

5. isWin: function() { 

6 // 使 用 双重 for 循环 遍历 整个 数组 

7 for (var i = 0; i< 8; i++) { 

8 for (var ] = 0; j < 8; j++) { 

9. // 如 果 有 箱子 没 在 终点 

10. if (box[i][j] == 4 && map[i][j] !'= 3) { 
1 // 返 回 false, 表 示 游 戏 尚 未 成 功 
12. return false 

13. } 

14. } 

49 } 

16. // 返 回 true, 表示 游 戏 成 功 

17. return true 

18. by 

19. }) 


上 述 代 码 的 判断 逻辑 是 只 要 有 一 个 箱子 没有 在 终点 位 置 就 判断 游戏 尚未 成 功 。 
然后 在 game. js 中 添加 自 定义 函数 checkWin ,要 求 一 旦 游戏 成 功 就 弹出 提示 对 话 框 。 
对 应 的 JS(pages/game/game.js) 代 码 片 段 修 改 如 下 : 


1. Pagel({ 

2 / 

3 < 自 定义 函数 -- 游戏 成 功 处 理 
4 */ 

5。 checkWin: function() { 
6 if (this.isWin()) { 

了 wx. ShowModal( { 

8 title: "恭喜 '， 

9 _. content: “游戏 成 功 ! '， 
10. showCancel: false 

11。 }) 

12. } 

13. “上 由 

14. }) 


最 后 在 game. js 的 4 个 方 品 键 函 数 中 退 加 关于 游戏 成 功 判 断 的 国 数 ,这 里 以 up 图 效 为 


例 , 对 应 的 JS(pages/game/game.]js) 代 人 码 厂 段 修改 如 下 : 


1. Page({ 
2. / ¥¥ 
3. < 上 月 定义 图 数 -- 方 问 键 : 上 


功 后 


钮 追 


x/ 


4 
5D, up: function() { 

6. // 不 在 最 顶端 才 考 虑 上 移 

和 if (row> 0) { 

8 // 如 果 上 方 不 是 墙 或 箱 了 于 ,可 以 移动 小 马 
9 


10. // 如 果 上 方 是 箱子 
11. ee 

12. 

13. // 重 新 绘制 地 图 
14. this. drawCanvasl ) 
15. // 检 查 游戏 是 否 成 功 
16 . this. checkWin( ) 

17. } 

18. bs 

19. }) 


其 他 3 个 方 回 的 图 效 的 修改 方式 和 up 
完全 一 致 ,这 里 不 由 一 一 榴 述 。 游 戏 成 
的 画面 如 图 13-18 所 示 。 

加 重新 开始 游戏 

修改 game. wxml 代码 ,为 “重新 开始 ” 按 
加 有 目 和 定义 困 数 的 点 击 事 件 。 

WXML (pages/ygame/ygame、wxml) 代码 上 请 段 修 改 


如 下 : 


13-18 ”游戏 成 功 提示 画面 


< Vlew class = 'container'> 


< button type = 'warn' bindtap = 'restartGame'> 重 新 开始 </button > 


</view> 


1 
2 
3. 
4. <!-- “重新 开始 ?按钮 -一 > 
5 
6 


在 game. js 文件 中 添加 restartGame 函数 ,用 于 重新 开始 游戏 。 
对 应 的 JSCpages/gameygame. js) 代 人 码 户 段 添 加 如 下 : 


1. Page({ 

2 / ¥¥ 

3 * 自 定义 函数 -- 重新 开始 游戏 

4 关 1 

二 restartGame: function( ) { 

6 // 初 始 化 地 图 数据 

7 this. initMap(this. data. level - 1) 
8 // 绘 制 画 布 内 容 

9 this. drawCanvas( ) 


此 时 页 面 效 果 如 图 13-19 所 示 。 


(a) 问 上 移动 效 采 (b) 重新 开始 游戏 
图 13-19 点击" 重新 开始 "按钮 效果 


13.6.1 应 用 文件 代码 展示 


app.json 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


请 
全 


iD 中 
a 


{ 

“Pages : [ 
"pages/ index/ index", 
" pages/game/game" 

], 

"Window : { 
"navigationBarBackgroundColor": " # E64340", 
"navigationBarTitleText" :" 推 箱子 游戏 " 

} 


od 


app. wxss 代码 展示 
app. WXSS 文件 的 完整 代码 如 下 : 


1 
2 
C 
4. 
3 
6 


/* 页 面容 右 样 式 */ 
.Container { 
height: 100vh; 
color: # E64340; 
font ~ weight: bold; 
display: flex; 


13. 


7 了 7. flex— direction: column; 

8. align ~ items: center; 

9 . Justify— content: space ~ evenly; 
10. } 

11. /x* 顶端 标 题 样 式 * / 

12. .title { 

13. font 一 Size: l18pt.; 

14. } 

0. 2 


iD 0 


3 tk ko 上 上 搬 
GD 疏 上 人 国医 后 


21. 


局 和 2 
Oo 0 Oo om 


和 


// 地 图 数据 mapl1 一 map4 


// 地 图 数据 : 1 为 墙 .2 为 路 、3 为 终点 、4 为 箱子 .5 为 人 物 .0 为 墙 的 外 围 


™ ™ ™ ™ 


™™ 


吗 


PHP 睛 
™ 


™ 


| 
记忆 


™ 


人 
二 


™ 


PP wm 一 
DODOQ. 


™ ™ ™ 


™™ 


™ 


™ 


5 
™ 


™ 


= 
™ 


™ ™ 


™ 


Ph 一 
人 


™ 


到 到 


™ 


™ 


和 


而 


到 到 


而 


™ ™ 到 


™ 


到 ™ 


FF 请 
三 


™ 


和 - - 


而 


和 到 


F 关 二 必 mi 


而 


™ - 


™ 


™ ™ ™ 


Fi ww wm 
™ 


™ 


机 到 


到 


上 上 上 


™ 


™ ™ 


™ 


™ 


一 


™ 


和 ™ ™ 


™ 


™ 


™ 


一 


™ 


™ ™ 


™ 


Le 合葬 忆 
人 


™ 


™ ™ 


™ 


™ ™ ™ 


EP 搬 搬 司 己 
™ 


™ 


公共 明 数 文件 代码 展示 
JS 文件 (utils/ data. js) 的 完整 代码 如 下 : 


0], 
0], 
0], 
0], 
lily 


1], 
1], 


1] 


0], 
0], 


13 


43， 
44. 
4 5 . 
46 . 
47 . 
48 . 


49 . 


50. 


51. 


52. 


3 


6.3 页 面 文件 代码 展示 


} 


[0, 1, 3, 2, 4, 3, 1, 
[1, 1, 1, 2, 2, 4, 1, 
[1, 2, 4, 2, 2, 4, 2, 
[1, 2, 1, 4, 1, 1, 2, 
[1, 2, 2, 2, 5, 2, 2, 
[ly ly 1 Ly 1 1 1, 


module. exports = { 
maps: [mapl, map2, map3, map4| 


和 页 代码 展示 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


< 吕 ( 人 


0], 
1], 
1], 
1], 
1], 
1] 


< TIew Class = 'container'> 


<!-- 标题 -一 > 


<view class = 'title'> 游 戏 选 关 </view> 


<!-- 关卡 列表 --> 


< Vlew class = 'levelBox'> 


< View class = 'box' wx:for = '{{levels}}' wx:key = 'levels{{index}}' bindtap = 'chooseLevel ' 


data — level = '{{index}}'> 


8. 
2 


10. 
11. 
12， 
13. </view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


iD 0 


< image src = '/images/{{item}}'></image> 
< text > 第 {{index +1}} 关 </text > 


</view> 
</view> 


/* 关卡 列表 区 域 */ 
. levelBox { 


} 


width: 100%.， 


/x* 单个 关卡 区 域 */ 
. box 1 


请 捕 ， 
> 


width: 50 委 ; 
float: left.; 
margin: 20rpx 0; 
display: flex; 


flex— direction: column; 


align ~ items: center; 


. /* 选 大 图 片 */ 


} 


image { 


width: 300rpx; 
height: 300rpx; 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 ， 


1. Pagel({ 

/ xx 

3， ”x 页 面 的 初始 数据 

4. wh 

ss data: 1 

6. levels: |[ 

了 。 Level101. png ， 

8. ‘level02. png", 

二 'level03. png "， 

10. ‘level04. png’ 

11. ] 

12. bs 

13. 了 

14. * 日 定义 函数 -- 游戏 选 关 
15. */ 

16. chooseLevel: function(e) { 
17. let level = e.currentTarget. dataset. level 
18. wxX. navigateTol( { 

19. url: '../game/game?level =' + level 
20. }) 

21. 本 

22. |}) 

游戏 页 代码 展示 


WXML 文件 (pages/game/game. wxml) 的 完整 代码 如 下 : 


1. <Vlew class = Contalner > 

2 <! 一 一 关卡 提示 -一 > 

3. <Vliew class = 'title'> 第 {{level}} 关 </view> 

4. 

本 <! 一 一 游戏 男 布 -一 > 

6 . < canvas canvas — jd = 'myCanvas'></canvas > 

i. 

8. <!-- 方 向 键 -一 > 

9. <Vview Class = ‘btnBox'> 

10. < button type = 'warn' bindtap = 'up'’> 和‘ </button > 

11. <Vlew> 

12. < button type = 'warn' bindtap = 'left'><—</button > 
1L3: < button type = 'warn' bindtap = 'down'> y </button > 
14. < button type = 'warn' bindtap = 'right'>—></button > 
15. </view> 

16. </View > 

17. 

18. <!-- “重新 开始 "按钮 -一 > 

19 . < button type = 'warn' bindtap = 'restartGame'> 重 新 开始 </button > 
20. </view> 


WXSS 文件 (pages/game/game. wxss) 的 完整 代码 如 下 : 


(nn 


/* 游戏 画布 样式 * / 


canvas { 


border: lrpx solid; 
width: 320px; 
height: 320px; 


JS 文件 (pages/game/game.1]s) 的 完整 代码 如 下 : 


/* 方向 键 按钮 整体 区 域 
. btnBox { 
display: flex; 


x/ 


flex— direction: column; 


align— items: Center ; 


. btnBox view { 
display: flex; 
flex— direction: row; 


} 


. /¥* 所 有 方 四 键 按钮 x* / 


. btnBox button { 
width: 90rpx; 
height: 90rpx; 

} 


/x* 所 有 按钮 样式 */ 
. button { 


margin: 10rpx; 
} 


1. var data = require('../ 
2. // 地 图 图 层 数 据 

3. varmap = |[ 

4. [0, 0, 0, 0, 0, 0, 0, 
< [0, 0, 0, 0, 0, 0, 0, 
6 [0, 0, 0, 0, 0, 0, 0, 
1 [0, 0, 0, 0, 0, 0, 0, 
8 [0, 0, 0, 0, 0, 0, 0, 
9. [0, 0, 0, 0, 0, 0, 0, 
10. [0.0.0 
11. [0, 0, 0, 0, 0, 0, 0, 
12. | 

13. // 箱 子 图 层 数 据 

14. var box = |[ 

15. [0, 0，0，0， 0, 0，0， 
16. [0，0，0，0，0，0，0， 
17. [0, 0, 0, 0, 0, 0, 0, 
18. [0, 0, 0, 0, 0, 0, 0, 
19. [0, 0, 0, 0, 0, 0, 0, 
20. [0, 0, 0, 0, 0, 90, 0, 
21. [0, 0, 0, 0, 0, 0, 0, 
22. [0, 0, 0, 0, 0, 0, 0, 
23. | 

24. // 方 块 的 宽度 

25. var Ww = 40 


. // 初 始 化 小 乌 的 行 与 列 
. Var row = 0 
. Var col = 0 


. /* 方 癌 刍 按钮 第 二 行 * / 


../utils/data. js') 


0], 
0], 
0], 
0], 
0], 
0], 
0], 
0] 


0], 
0], 
0], 
0], 
0], 
0], 
0], 
0] 


29 . 
30. 
了 1 。 
已 
33. 
34. 
35. 
36 . 
37. 
38. 
39. 
40. 
41. 
42. 
43. 
44. 
45. 
46. 
47. 
48 . 
49 . 
50. 
51. 
2. 
53. 
54. 
“pp 
Db: 
了 了。 
58. 
5 9. 
60. 
61. 
62. 
6b3. 
6b4d. 
65 . 
6 . 
67. 
68. 
69. 
70. 
71. 
12. 
73. 
174. 
75. 
76. 
1. 
78. 
79. 
80. 
81. 
82. 
83. 


/ ¥¥ 
* 目 定 义 图 数 -- 初始 化 地 图 数据 
x / 
initMap: function(level) { 
// 读 取 原 妈 的 游戏 地 图 数据 
let mapData = data. maps|[ level | 
// 使 用 双重 for 循环 记录 地 图 数据 
for (var 1 = 0; i<8; i++) { 
for (var j] = 0; j <8; j++) { 
box[i][j] = 0 
map[i][j] = mapData[li][j] 


if (mapData[il][j] == 4) { 
box[il[j] = 4 

map[i][j] = 2 

else if (mapData[i][j] == 5) 1{ 
map[il[j] = 2 

// 记 录 小 乌 的 当前 行 和 列 


IOW 一 1 


i 


col = ] 
} 
} 
} 
}, 
/ 尖 共 
* 目 定 义 困 数 -- 绘制 地 图 
关 1/ 
drawCanvas: function( ) { 
let ctx = this. ctx 
// 清 空 画布 
ctx. clearRect(0, 0, 320, 320) 
// 使 用 双重 for 循环 绘制 8x 8 的 地 图 
for (var i = 0; i<8; i++) { 
for (var j] = 0; Jj < 8; j++) { 
// 黑 认 是 诞 路 
let lmg = “1Ce 
if (map[i][j] == 1) { 
lmg = 'stone' 
} else if (map[l i][j] == 3) 1{ 
img = ‘pig 
} 


// 绘 制 地 图 


ctx. drawImage( '/ images/icons/' + img + '.png', J] * WwW, i ¥* Ww, w, w) 


if (box[i][j] == 4) { 
// 重 加 绘制 箱子 
ctx. drawImage( '/images/icons/box.png', ] * w, i x* w, w, Ww) 
} 
} 
} 


// 登 加 绘制 小 马 


ctx. drawImagel( '/ images/icons/bird. png', col * W row ¥% W WwW, Ww) 


ctx. draw({ ) 
}, 


/ 尖 关 
* 目 定 义 图 数 -- 方 向 键 : 上 
关 / 
up: function( ) { 
// 不 在 最 顶端 才 考 虑 上 移 
if (row> 0) { 
// 如 果 上 方 不 是 墙 或 箱子 ,可 以 移动 小 乌 
if (map[row — ll|[col|] !'= 1 && box[row — 1l][col] '= 4) { 
// 更 新 当前 小 马 的 坐标 
row = row 一 1 
} 
// 如 果 上 方 是 箱子 
else if (box[row — 1][col] == 4) { 
// 箱 子 不 在 最 项 端 才 能 考虑 推动 
if (row 一 1>0) { 
// 如 果 箱 子 上 方 不 是 墙 或 箱子 
if (map[row — 2][col] '= 1 && box[row - 2]1[col] != 4) { 
box[row — 2][col] = 4 
box[row — 1][col|] = 0 
// 更 新 当前 小 乌 的 坐标 
row = IOW 一 1 
} 
} 
} 
// 重 新 绘制 地 图 
this. drawCanvas( ) 
// 检 查 游 戏 是 否 成 功 
this. checkWin() 
} 
}, 
/ x 
* 目 定 义 图 数 -一 方 千 键 : 下 
关 1/ 
down: function() { 
// 不 在 最 底 端 才 考 虑 下 移 
if (row<7) 1{ 
// 如 有 果 下 方 不 是 墙 或 箱 于 ,可 以 移动 小 鸟 
if (maplrow + ll|[col|] !'= 1 && box[row + 1j[col]l '= 4) { 
// 更 新 当前 小 乌 的 坐标 
row = row + 1 
} 
// 如 采 下 方 是 箱子 


else if (box[row + 1][col] == 4) { 
// 箱 子 不 在 最 底 端 才能 考虑 推动 
if (row + 1<7) 1{ 
// 如 采 箱 子 下 方 不 是 场 或 箱 于 
if (map[row + 2|[col| != 1 && box[row + 2|][col] '= 4) { 
box[row + 2][col] = 4 
box[row + 1l][col] = 0 
// 里 新 当前 小 乌 的 坐标 
row = row + 1 
} 
} 
} 
// 重 新 绘制 地 图 
this. drawCanvas!( ) 
// 检 查 游戏 是 否 成 功 
this. checkWin() 
} 
}, 
/ ¥¥ 
* 目 定 义 图 数 -一 方 癌 键 : 左 
关 1 
left: function() 1{ 
// 不 在 最 左 侧 才 考虑 左 移 
if (col > 0) 1{ 
// 如 果 左 侧 不 是 墙 或 箱子 ,可 以 移动 小 鸟 
if (map[row][col - 1] !'= 1 && box[row][col - 1] !'= 4) { 
// 里 新 当前 小 乌 的 坐标 
col = col -1 
| 
// 如 果 左 侧 是 箱子 
else if (box[row|[col — 1|] == 4) 1{ 
// 箱 于 不 在 最 左 侧 才能 考虑 推动 
if (col 一 1>0}1 
// 如 有 果 箱 子 左 侧 不 是 墙 或 箱子 
if (map[row|[col — 2]!= 1 && box[row|[col - 2] '= 4) { 
box[row|[col — 2|] = 4 
box[row|[col - 1] = 0 
// 更 新 当前 小 乌 的 坐标 
col = col -1 
} 
} 
} 
// 重 新 绘制 地 图 
this. drawCanvas( ) 
// 检 查 游戏 是 否 成 功 
this. checkWin( ) 


}, 
/ 尖 尖 
* 肯定 义 困 数 -一 方 回 键 : 右 
x/ 
right: function() { 
// 不 在 最 右 侧 才 考 虑 右 移 


if (col < 了 7 了) { 
// 如 果 右 侧 不 是 墙 或 箱子 ,可 以 移动 小 鸟 
if (map[row]l[col + 1]!= 1 8&&box[row]l[col + 1]!= 4) 1 
// 更 新 当前 小 乌 的 坐标 
col = col + 1 
} 
// 如 果 右 侧 是 箱子 
else if (box[row|[col + 1|] == 4) { 
// 箱 子 不 在 最 右 侧 才能 考虑 推动 
if (col + 1<7) 1{ 
// 如 果 箱 子 右 侧 不 是 卉 或 和 子 
if (maplrowjlcol + 2|] !'= 1 && box[row|l[col + 2] !'!= 4) 1 
box[row|[col + 2|] = 4 
box[row|[col + 1] = 0 
// 更 新 当前 小 乌 的 坐标 
col = col + 1 
} 
} 
} 
// 重 新 绘制 地 图 
this. drawCanvas!( ) 
// 检 查 游戏 是 否 成 功 
this. checkWin( ) 


/ ¥¥ 
* 目 定 义 图 数 -- 判断 游戏 是 否 成 功 
x/ 
isWin: function() { 
// 使 用 双重 for 循环 遍历 整个 数组 
for (var i = 0; i<8; i++) { 
for (var ] = 0; j <8; j++) { 
// 如 果 有 箱子 没 在 终点 
if (box[il[j] == 4 && map[i][j] !'= 3) 1{ 
// 返 回 false, 表示 游戏 尚未 成 功 
return false 
} 
} 
} 
// 人 返回 true, 表示 游戏 成 功 
return true 


}, 


/ 关 基 
* 明定 义 函 数 -游戏 成 功 人 处 理 
x / 
checkWin: function() { 
if (this. isWin()) 1 
wx. ShowModal ( { 
title: ' 苛 豆 '， 
content: ' 游 戏 成 功 ! "， 
showCancel: false 


}) 
} 
}, 


/ x 
x 日 定义 函数 -重新 开始 游戏 
x/ 
restartGame: function() { 
// 初 她 化 地 图 数据 
this. initMap(this. data. level — 1) 
// 人 绘制 画布 内 容 
this. drawCanvas!( ) 
}, 


/ x 
< 生命 周期 图 数 -- 监听 页 面 加 载 
关 1/ 

onLoad: function(options) { 
// 获 取 关 卡 
let level = options. level 
// 更 新 页 面 关卡 标题 


this. setDatal { 
level: parselInt(level)+1 
}) 
// 创 建 画布 上 下 文 
this.ctx = wiz. createCanvasContext( 'myCanvas') 
// 初 始 化 地 图 数据 
this. initMap( level) 
// 绘 制 画 布 内 容 
this. crawCanvas( ) 


小 程序 游戏 ， 贷 吃 蛇 游 戏 


在 学 习 了 < canvas >( 画 布 ) 组 件 和 小 程序 界面 API 中 绘图 的 相关 用 法 以 后 ,读者 不 妨 尝试 


。 综合 应 用 所 学 知识 创建 完整 的 贪 吃 蛇 游 戏 项 目 ; 
。 训练 掌握 < canvas >( 画 布 ) 组 件 和 绘图 API。 


本 项 目 一 共 需 要 两 个 页 面 , 即 首页 和 游戏 页 面 ,其 中 首页 用 于 呈现 关卡 菜 国 中 各 中 
单 , 点 击 对 应 难度 的 关卡 后 进入 游戏 画面 。 视频 讲解 


14.1.1 首页 功能 需求 


首页 功能 需求 如 下 : 

(1) 首页 需要 包含 标题 和 关卡 列表 。 

(2) 关卡 列表 包含 两 种 游戏 模式 , 即 简 单 模式 和 困难 模式 ,主要 区 别 在 于 贪 吃 蛇 移 动 速度 
的 快慢 。 

(3) 点 击 天 卡 图 片 可 以 打开 对 应 的 游戏 画面 。 


14. 1.2 游戏 页 功能 需求 


游戏 页 功能 需求 如 下 . 

(1) 游戏 页 面 需要 显示 当前 得 分 .游戏 画面 方 问 键 和 ”重新 开始 ”按钮 。 
(2) 点 击 方向 键 可 以 使 贪 吃 蛇 上 、 下 ,左右 转 方向 前 进 和 吃食 物 。 

(3) 游戏 画面 由 16X16 格 的 小 方块 组 成 ,主要 用 于 显示 贪 吃 蛇 和 食物 。 
(4) 点 击 “ 重 新 开始 ”按钮 可 以 重 置 全 部 游戏 数据 并 重新 开始 游戏 。 


本 项 目 创建 选择 空白 文件 夹 snakeDemo, 效 果 如 图 14-1 所 示 。 a en 
单 击 “新 建 ?按钮 完成 项 目 创建 ,然后 准备 手动 修改 页 面 配置 文件 。 视频 讲解 


可 = 国 导入 项 目 


snakeDemo 


E. Wxdemo _ workspaceisnakeDemo 


Wx19079110a0i01e8a 


车 无 ApplD 可 注册 
或 使 用 测试 号 
小 程序 
总 不 使 用 云 服务 
[小 程序 - 云 开 发 
建 腿 务 需 ,使 用 平台 提供 的 API 进行 核心 业务 开发 ， 即 可 实现 小 程序 快速 上 水 和 
先 人 化。 了 解 详情 


了 局 和 去 


Javascript 


图 14-1 小 程序 项 目 填 写 效 果 示 意图 


14.3.1 创建 页 和 面 文件 


项 目 创建 完毕 后 ,在 根 目录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 周 同 到 
一 般 来 说 首页 默认 命名 为 index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 国生 全 
称 可 以 自 定义 。 本 项 目 有 两 个 页 面 文件 ,需要 创建 index( 首 页 页 面 ) 和 game ”并 局 
(游戏 页 面 )。 

具体 操作 如 下 : 

(1) 将 app. json 文件 内 pages 属性 中 的 “pages/logs/logs” 改 成 “pages/game/game”; 

(2) 按 快捷 键 Ctrl 十 S 保存 修改 后 会 在 pages 文件 夹 下 自动 生成 game 目录 。 


14.3.2 删除 和 修改 文件 


具体 操作 如 下 : 

(1) 删除 utils 文件 夹 及 其 内 部 所 有 内 容 。 

(2) 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 。 

(3) 删除 index. wxml 和 index. wxss 中 的 全 部 代码 。 

(4) 删除 index. js 中 的 全 部 代码 ,并且 输 入 关键 词 page 找到 第 二 个 选项 按 回 车 键 让 其 有 
动 补 全 了 苑 数 ( 如 图 14-2 所 示 )。 

(5) 删除 app. wxss 中 的 全 部 代码 。 

(6) 删除 app.js 中 的 全 部 代码 ,并 且 输 入 关键 词 app 找到 第 一 个 选项 按 回 车 键 让 其 日 动 
补 全 函数 (如 图 14-3 所 示 )。 


index je .| 


/iindex .js 


function OO 
[Ff FAaEe 
WD BetCurrentPages 
全 package 
FP pauseBackgroundAudio 
previewImage 
~ canvasPutImageData 


14-2 输入 关键 词 创建 Page 函数 


app.js 各 
1 /fapp.js 
2 B08 


14-3 输入 关键 词 创建 App 函数 


14.3.3 创建 其 他 文件 


接 下 来 创建 其 他 日 定 义 文件 ,本 项 目 还 需要 一 个 images 文件 夹 ,用 于 存放 图 片 泰 材 。 单 
击 目录 结构 左上 角 的 十 号 创建 文件 夹 ,并 命名 为 images。 

本 项 目 将 在 首页 中 用 到 两 幅 关 卡 图 片 ,图 片 素材 如 图 14-4 所 示 。 

右 击 目录 结构 中 的 images 文件 夹 ,选择 “ 便 盘 打开 ”, 将 图 片 复制 、 粘 贴 进去 。 

全 部 完成 后 的 目录 结构 如 图 14-5 所 示 。 

此 时 文件 配置 就 全 部 完成 ,14. 4 节 将 正式 进行 页 面 布局 和 样式 设计 。 


” images 
闷 snake01.png 
加 snake02.png 
加 pages 
= CS game 
J9 gamejs 
{} game.json 


> game.wxml 
ws QamMe. Wss 
” [SS index 
J9 indexjs 
{} indexjson 
ss index wxml 
ws INdex Wxss 
J3 app.js 
{} app.json 
ws app.WCSS 


[#) project.config.json 


疝 单 模式 困难 模式 


OO OO 


(al Snake01.pneg (b) snake02.png 
图 14-4 关卡 图 片 素材 展示 14-5 全 部 文件 创建 完成 


14.4.1 导航 栏 设计 


小 程序 默认 导航 栏 是 黑 底 白字 的 效果 ,可 以 通过 在 app. json 中 对 
window 属性 进行 重新 配置 来 日 定义 导航 栏 效 果 。 玩 改 后 的 app. json 文件 代 
人 码 如 下 : 


{ 
"pages" : [代码 略 ]， 
"Window :{ 
" navigationBarBackgroundColor" : " # E64340", 
"navigationBarTit1leText" : " 颌 吃 蛇 小 游戏 " 
} 
} 


上 述 代 码 可 以 更 改 导 航 栏 背景 色 为 珊瑚 红色 .字体 为 白 
色 ,效果 如 图 14-6 所 示 。 
14.4.2 页 面 设计 

公共 样式 设计 

首先 在 app. wxss 中 设置 页 面容 器 和 顶端 标题 的 公共 样式 ,代码 如 下 : 
/* 页 面容 器 样式 x*/ 
.Container | 


height: 100vh; 
display: flex.; 


flex— direction: column,; 

align ~ items: center; 

Justify— content: Space 一 evenly; 
| 


首页 设计 

自 页 主 要 包含 两 个 关卡 选项 ,页 面 设计 如 图 14-7 所 示 。 
计划 使 用 如 下 组 件 。 

。 整体 . < view > 容 需 ; 

。 关卡 列表 : < image >( 图 片 ) 组 件 。 
WXML(pages/index/index. wxml) 代 人 码 如 下 : 


的 -后 必 鲍 人 捕 


1l. <view class = ContalineTr > 

此 < image src = '/ images/ snake01. png'></image > 
Ds < image src = '/images/snake02. png'></image > 
4. </view> 


相关 WXSS(pages/index/index. wxss) 代 人 码 厅 上段 如 下 . 


2. imagel{ 
天 width: 400rPX; 


4. height: 400rpx; 
5. | 


当前 效果 如 图 14-8 所 示 。 


《图 片 ) 
阅 单 模式 


困难 模式 


OO 


14-7 ”首页 设计 图 图 14-8 ”首页 效果 图 


由 图 可 见 ,此 时 可 以 显示 自负 的 两 种 游戏 模式 。 由 于 尚未 编写 图 片 的 点 
击 事 件 , 所 以 暂时 无 法 跳 转 游戏 页 面 , 仅 供 作 为 样式 参考 ， 
游戏 页 面 设计 
游戏 页 面 需 要 用 户 点 击 自 页 的 游戏 模式 ,然后 在 新 窗口 中 打开 该 页 面 。 
游戏 页 面包 括 当 前 分 数 ,游戏 区 域 . 方 向 键 和 “重新 开始 ”按钮 ， 
页 面 设计 如 图 14-9 所 示 。 
由 于 暂时 没有 做 点 击 跳 转 的 逻辑 设计 ,所 以 可 以 在 开发 工 
具 顶 疹 选 择 * 普 通 编 详 ? 下 的 “添加 编 详 模式 ”, 并 携 市 临时 测试 
参数 time 一 500 ,表示 游戏 刷新 频率 为 每 隔 500ms( 即 0. 5s) 刷 
新 一 次 ,如 图 14-10 所 示 。 
此 时 预览 就 可 以 直接 显示 game 页 面 了 ,设计 完毕 后 再 改 
回 “ 普 通 编译 ”模式 即 可 重新 显示 首页 。 
计划 使 用 如 下 组 件 。 
。<view>: 整体 容器 和 顶端 标题 ; 
。 < 过 canvas >: 洲 戏 男 布 ; 
。 < button >: 4 个 方 回 键 和 1 个 "重新 开始 ?按钮 。 
WXML(pages/game/game. wxml) 代 码 如 下 : “重新 开始 ”按钮 


1. <vVview class = ‘container'> 


和 <! 一 一 关卡 提示 一 一 > 图 14-9 ”游戏 页 面 设计 图 


[| 下 次 编译 时 模拟 更 新 ( 需 1.9.90 及 以 上 基础 库 版 本 ) 


取消 
14-10 ”添加 game 页 面 的 编译 模式 
<Vview> 当 前 分 数 : 0 </view> 


<! 一 一 游戏 画布 -一 > 


< canvas canvas — id = 'myCanvas'></canvas > 


<!- 一 方 问 键 -一 > 
< VlIeWwW class= “btnBoX > 
< button > </button > 
< TILeW > 
< button ><—</button > 
< button > y </button > 
< button >—</button > 
</view> 
</view> 


<!-- “重新 开始 ”按钮 --> 
< button > 重新 开始 </button > 


. </view> 


WXSS(pages/game/game. wxss) 代 码 如 下 : 


mIAUUAGONP 


yp 
器 


/< 游戏 画布 样式 * / 

canvas { 
border: lrpx solid # E64340; 
width: 320px; 
height: 320px; 

} 


/* 方 回 键 按钮 整体 区 域 * / 
.btnBox { 
display: flex; 
flex— direction: column; 
align ~ items: center; 


} 


/ * 方向 键 按钮 第 二 行 * / 
.btnBox view { 

display: flex; 

flex— direction: row; 


} 


/* 所 有 方向 键 按 钮 * / 
.btnBox button { 


23. width: 90rpx; 
24. height: 90rpx; 
25. ]」 


27. /¥* 所 有 按钮 样式 */ 

28. button { 

29. margin: 10rpx; 

30. background — color: # E64340; 
31. color: White; 

42. | 


当前 效果 如 图 14-11 所 示 。 


图 14-11 游戏 页 面 效 果 图 
由 图 可 见 ,此 时 可 以 显示 完整 的 布局 样式 。 由 于 疯 示 绘制 画布 上 的 内 容 , 所 以 普 时 看 不 到 
信 虑 蛇 的 动画 效 来 。 
此 时 页 面 布局 与 样式 设计 就 已 完成 ,14.5 节 将 介绍 如 何 进行 数据 模型 设计 。 


本 项 目 计划 将 游戏 画布 分 割 成 16 行 .16 列 的 网 格 , 每 个 网 格 的 长 、 宽 均 为 20 像素 。 画 布 
上 的 贪 吃 蛇 是 由 一 系列 连续 的 网 格 填充 颜色 组 成 的 ,食物 是 由 单个 网 格 填充 颜色 而 成 的 ,因此 
只 要 知道 了 这 些 需 要 十 色 的 网 格 坐标 即 可 在 画布 上 绘制 出 蛇 身 与 食物 。 
14. 5.1 贪 吃 蛇 模型 设计 


本 项 目 设 置 贪 吃 蛇 的 初始 号 长 为 3 格 , 以 贪 吃 蛇 的 蛇 头 出 现在 最 左 侧 第 二 行 并 且 问 右 移 
动 为 例 , 动 态 过 程 如 图 14-12 所 示 。 


(a) 贪 吃 蛇 的 初始 位 置 (b) 蛇 向 右 伸展 的 过 程 (6) 展现 完成 蛇 身 
图 14-12 贪 吃 蛇 的 模型 概念 图 


图 中 标记 的 所 有 坐标 数据 对 应 的 都 是 网 格 的 左上 角 坐 标 位 置 。 由 图 14-12(a) 可 见 , 本 示 
例 中 贪 吃 蛇 的 初始 位 置 出 现在 坐标 (0,10) 人 处 ,使 用 浅 蓝 色 填 充 边 长 为 10 像素 的 网 格 来 表示 蛇 
喘 。 由 于 目前 规定 为 癌 右 移动 ,所 以 随 着 每 次 游戏 内 容 刷 新 都 追加 填充 右 侧 一 个 空白 网 格 作 
为 蛇 刁 ,直至 完整 蛇 身 在 网 格 中 全 部 显现 ,这 一 过 程 由 图 14-12(b) 和 图 14-12(c) 所 呈现 。 

使 用 一 个 数组 snakeMap 来 记录 组 成 蛇 号 的 每 一 个 网 格 坐 标 , 并 依次 在 画布 的 指定 位 置 
填充 颜色 , 即 可 形成 贪 吃 蛇 从 出 现 到 移动 直至 展现 完整 身体 的 过 程 。 

例如 上 面 示 例 中 向 右 移 动 的 贪 吃 蛇 初 始 状 态 的 坐标 可 以 记录 为 : 


snakeMap = [{'x':0, 'y':10}]; 

随 着 蛇 头 回 右 前进 ,该 数组 增加 第 二 组 坐标 : 

snakeMap = [{'x':0, 'y':10}, {'x':10, 'y':10}]; 

如 果 继 续 癌 右前 进 ,该 数组 增加 第 三 组 坐标 、 

snakeMap = [{'x':0, 'y':10}, {'x':10, 'y':10}, {'x':20, 'y':10}]; 


此 时 蛇 身 已 经 完整 显示 出 来 。 
14.5.2 蛇 身 移动 模型 


当 蛇 映 已 经 完全 显示 在 游戏 画面 中 时 ,如 果 蛇 继续 前 进 , 则 需要 清除 蛇 尾 的 网 格 颜 色 , 以 
表现 出 蛇 的 移动 效果 。 以 14. 5.1 节 的 贪 吃 蛇 模 型 为 例 ,分 别 展示 其 癌 右 、 问 下 和 向 上 移动 的 
效果 ,如 图 14-13 所 示 。 

图 14-13(b) 显 示 的 是 贪 吃 蛇 的 蛇 身 已 全 部 显示 出 来 后 仍 继续 向 右前 进 的 效果 。 在 吃 到 
食物 之 前 , 蛇 的 身长 都 将 保持 不 变 。 此 时 除了 需要 填充 右 侧 一 个 新 的 空白 网 格外 还 需要 清除 
最 早 的 一 个 蛇 身 网 格 颜 色 , 以 实现 蛇 在 移动 的 动画 效果 。 图 14-13(c) 与 图 14-13(d) 显 示 的 是 
贪 吃 蛇 分 别 癌 下 和 癌 上 移动 的 效果 ,其 原理 与 图 14-13(b) 的 解释 相同 。 

以 14. 5.1 节 介绍 的 数组 snakeMap 为 例 ,继续 讲解 如 何 实 现 蛇 的 移动 效果 。 

例如 继续 往 右 前 进 ,该 数组 添加 新 坐标 ,并且 还 需要 删除 最 早 的 一 组 坐标 : 


snakeMap = [{'x':10, 'y':10}, {'x':20, 'vy':10}, {'x':30, 'y':10}]; 


因为 该 数组 中 的 坐标 只 用 于 显示 当前 的 蛇 号 数据 ,所 以 需要 去 挥 曾经 路 过 的 轨迹 。 这 种 
绘制 方式 可 以 展现 贪 吃 蛇 的 动态 移动 效果 。 故 只 要 每 次 游戏 界面 刷新 时 保持 更 新 snakeMap 


(c) 蛇 向 下 移动 的 效果 (d) 蛇 向 上 移动 的 效果 
图 14-13” 贪 吃 蛇 的 移动 模型 图 


数组 的 记录 即 可 获得 贪 旋 蛇 的 当前 位 置 。 
14.5.3 由 呈 食 物 模 型 


在 贪 吃 蛇 的 移动 过 程 中 ,如 果 蛇 头 碰撞 到 食物 , 则 认为 蛇 将 食物 吃 挤 了 。 此 时 蛇 的 号 长 增 
加 一 格 , 并 且 食 物 消失 ,然后 在 随机 位 置 重 新 出 现 。 同 样 以 初始 方 格 左上 角 位 置 在 (0,10) 坐 
标 、 导 长 为 3 格 的 蛇 模型 为 例 展 示 蛇 吃食 物 的 过 程 ,如 图 14-14 所 示 。 


(a) 领 呈 蛇 的 初始 位 置 (b) 蛇 向 下 移动 准备 吃食 ( 吞食 后 的 贪 吃 蛇 
图 14-14 蛇 吃 食物 的 模型 图 


由 图 14-14(a) 可 见 , 食 物 位 于 蛇 头 的 正 下 方 , 因 此 需要 控制 蛇 涉 癌 下 移动 来 接近 食物 ; 
图 14-14(b) 显 示 的 是 蛇 癌 下 移动 一 格 后 的 效果 ,此 时 蛇 头 已 经 赔 在 食物 边 上 了 ; 图 14-14(c) 
显示 的 是 食物 被 否 食 后 的 效果 ,此 时 贪 吃 蛇 的 蛇 号 长 度 增 加 了 一 格 并 且 食 物 消失 。 

因此 每 当 蛇 吃 到 食物 时 ,需要 将 表示 蛇 号 的 变量 t 日 增 1。 然 后 判断 用 于 记录 蛇 映 坐标 的 
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数组 snakeMap 的 长 度 , 如 果 与 当前 蛇 号 长 度 t 的 值 相 同 , 则 不 必 删 除 最 前 面 的 数据 。 
此 时 的 snakeMap 数组 坐标 为 ， 


snakeMap = [{'x’:10, ‘y':10}, {'x':20, 'y':10}, {1'x':20, 'Y':20}, {'x':20, 'Y':30}|]; 


14.6.1 首页 过 和 辑 


首页 主要 需要 实现 点 击 图 片 能 跳 转 到 游戏 页 面 , 并 且 根 据 诉 戏 难度 模式 
规定 贪 吃 星 的 行动 速度 。 本 项 目 根据 贪 吃 紫 的 行动 速度 快慢 计划 采用 两 种 诉 
戏 模式 , 即 简 单 模 式 (每 0. 5s 行动 一 次 ) 和 困难 模式 (每 0. 2s 行动 一 次 ) 。 人 
相关 WXML(pages/index/index. wxml) 代 人 码 片 段 修 改 如 下 : 


1. <Vliew class= "container > 

2 < image src = '/images/snake01. png' bindtap = 'goToGame' data - level = 'easYy'></ jimage > 
3. < image src = '/images/snake02. png' bindtap = 'goToGame' data - level = 'hard'></image > 
4. </view> 


上 述 代 码 表 示 为 关卡 语 加 了 上 月 定义 点 击 事件 困 数 goToGame, 并 且 使 用 data-level 属性 扒 
市 了 诉 戏 难度 模式 信息 easy 和 hard。 
然后 在 对 应 的 index. js 文件 中 添加 goToGame 图 数 的 内 容 , 代 码 片 段 如 下 : 


Pagel { 

/ x 
* 自 定义 函数 -- 跳 转 游戏 页 面 
x*x/ 

goToGame: function(e) { 
// 获 取 游 戏 模式 
let level = e.currentTarget. dataset. level 
// 游 戏 界面 刷新 的 间隔 时 间 , 单 位 为 毫秒 (数字 越 大 , 蛇 的 速度 越 慢 ) 
let time = 0 


RH 
i 
时 


// 简 单 模式 
12. if (level == 'easy') { 
13. time = 500 
14. } 
15. // 困 难 模式 
16. else if (level == 'hard') { 
i7. time = 200 
18. } 
19. 
20. // 跳 转 到 游戏 页 面 
21. wx. navigateTol( { 
22. url: '../game/game?time = ' + time, 
ly }) 
24. 外 
25， 上 


此 时 已 经 可 以 点 击 跳 苇 到 game 页 面 , 并 且 成 功 携 市 了 贪 吃 紫 的 行动 速度 数据 ,但 是 仍 需 
在 game 页 面 进行 携 市 数据 的 接收 处 理 才 可 显示 正确 的 诉 戏 画面 。 


14.6.2 游戏 页 逻辑 


游戏 页 面 主要 有 以 下 几 个 功能 需要 实现 : 

。 初始 化 游戏 数据 ,包括 蛇 号 长 度 .游戏 速度 .初始 食物 位 置 等 ; 

。 游戏 画面 的 绘制 ; 

。4 个 方 回 键 可 以 改变 贪 上 吃 蛇 的 行动 方 问 ; 

点击“ 重新 开始 "按钮 可 以 使 游戏 回 到 初始 状态 ; 

。 游戏 分 数 的 记录 ; 

。 游戏 失败 的 判断 。 

有 准备 工作 

首先 在 game. js 顶端 使 用 一 系列 数据 表示 贪 吃 蛇 的 初始 状态 ,包括 蛇 身 
长 度 .首次 出 现 的 位 置 和 移动 方 回 等 。 相 关 JSCpages/game/game. js) 代 码 卢 
段 如 下 : 


vart = 3 
// 记 录 蛇 的 运动 轨迹 ,用 数组 记录 每 个 坐标 点 
Var snakeMap = [|] 
// 蛇 身 单元 格 大 小 
var w = 20 
. // 方 向 代码 : 上 为 1、 下 为 2、 左 为 3. 右 为 4 
. Var direction = 1 
. // 蛇 的 初始 坐标 


. WarX = 0 


| 


ID 
四 


PP 
ID mm = 曰 ko 上 避 


. Vvary = 0 

. // 食 物 的 初始 坐标 

. Var foodX = 0 

. Var foodY = 0 

. // 男 布 的 宽 和 高 

. Var width = 320 

20. var height = 320 

21. // 游 戏 界 面 刷 新 的 间隔 时 间 , 单 位 为 党 秒 (数字 越 大 , 蛇 的 速度 越 慢 ) 
22. var time = 1000 


23. 

24. Pagel(f 

25. /xx 

26. * 页 面 的 初始 数据 

27. /1 

28 data: 1 

29. score: 0 // 游 戏 当 前 分 数 
30. |} 

31. }) 


需要 注意 的 是 ,此 时 time 只 是 初始 值 ,还 需要 在 game. js 的 onLoad 函数 中 读 取 从 首页 传 
递 来 的 参数 值 对 其 进一步 更 新 。 相 关 JS(pages/game/game.js) 代 码 片 段 如 下 .: 


1. Pagel{ 
2， / xx 


另外 还 需要 在 game. js 的 onLoad 图 数 中 对 画布 上 下 文 进行 初始 化 ,以 便 后 续 可 以 进行 贪 
吃 蛇 和 食物 的 绘制 工作 。 相 关 JSCpages/gamey/game. js) 代 码 片 段 如 下 : 


最 后 修改 game. wxml 页 面 ,将 游戏 分 数 用 {1{score}} 表 示 , 相 关 WXML (pages/game/ 


Doom 人 G 


IAN 人 AAODNDPp 


* 生命 周期 图 数 -- 监听 页 面 加 载 
关 1 
onLoad: function(options) { 
// 更 新 游戏 刷新 时 间 
time = options.time 
}, 
}) 


Pagel { 
/ x 
* 生命 周期 国 数 -- 监听 页 面 加 载 
x 
onLoad: function(options) { 
// 里 新 游戏 刷新 时 间 


time = options.time 


// 创 建 画 布 上 下 文 


this.ctx = wx. createCanvasContext( 'myCanvas') 


game. wxm1l) 代 人 码 如 下 : 
1 < Vlew class= 'container'> 
2 < 一 一头 握 示 一 一 > 
3 < Vijew> 当 前 人 分数: {{score}} </view> 
4. 
BS <! 一 一 游戏 画布 (代码 上 略 ) -一 > 
6 <! 一 一方 向 键 (代码 上 略 ) -一 > 
7 <! 一 一 重新 开始 按钮 ( 代 公 上 略 ) -一 > 
8. </view> 


绘制 贪 吃 蛇 逻辑 实现 
1) 初始 化 贪 吃 蛇 数据 


每 次 游戏 重新 开始 时 需要 重新 初始 化 贪 吃 蛇 的 一 系列 数据 ,例如 蛇 号 长 


度 、 蛇 喘 坐 标 、 蛇 头 坐 标 和 前 进 方向 等 。 


在 game. js 文件 中 创建 和 目 定义 函数 gameStart ,用 于 启动 游戏 ,对 应 的 JS 


(pages/ygameygame. js) 人 代码 片段 添加 如 下 : 


1 
2 
3 
4 
5 
6. 
7 
8 
9 
1 
1 


0 
1 


Pagel { 

/ x 
* 自 定 义 函 数 -- 启动 游戏 
关 1 

gameStart: function() { 
// 初 始 化 蛇 身 长 度 
t = 3 
// 初 始 化 蛇 身 坐标 
snakeMap = [|] 


// 随 机 生成 贫 吃 蛇 的 杞 始 蛇 头 坐标 


视频 讲解 


1 
13. 
14. 
15. 
16. 
17. 


18. 


下 


yY 


Math. floor(Math.random() x* width / WwW) * w 
Math.floor(Math.random() 关 height / w) x* w 


// 随 机 生成 蛇 的 初始 前 进 方向 
direction = Math. ceil(Math.random() * 4) 
上 
}) 


硅 蛇 的 初始 位 置 与 方 品 的 初始 数据 均 为 固定 值 , 则 会 降低 游戏 的 难度 和 可 玩 度 ,因此 可 以 
使 用 随机 数 重新 定义 贪 吃 蛇 初 始 出 现 的 位 置 和 移动 方 器 ,以便 每 次 游戏 都 可 以 获得 不 同 的 


2) 绘制 蛇 刁 

每 次 游戏 画面 刷新 , 蛇 都 霹 要 在 指定 方 品 上 上 再 前 进 一 格 。 如 果 蛇 没有 吃 
到 新 的 食物 , 则 还 需要 清除 原先 蛇 尾 最 后 一 个 位 置 的 颜色 ,以 表现 出 贪 吃 蛇 动 
态 前 进 了 一 格 的 效果 。 


在 game. js 中 声明 和 月 定义 图 数 drawSnake, 专 门 用 于 绘制 贪 吃 蛇 的 蛇 身 ， 视频 讲解 
对 应 的 JS(Cpages/game/game.js) 代 码 片 段 如 下 : 


Pagel { 

/ ¥x 
* 自 定义 函数 -- 绘制 贫 吃 蛇 
x/ 

drawSnake: function() { 
let ctx = this.ctx 
// 设 置 蛇 身 的 填充 颜色 
ctx. setFillStyle( 'lightblue') 
// 绘 制 全 部 蛇 身 
for (var i = 0; i < snakeMap. length; i++) { 

ctx. fillRect( snakeMap[i].x, snakeMap[i].y, w, w) 


}, 


由 于 要 通过 游戏 画面 刷新 才能 实现 动画 效果 ,所 以 在 game. js 中 声明 上 月 定义 图 数 
gameRefresh 专门 用 于 刷新 画布 ,并 在 该 图 数 中 调用 drawSnake 函数 来 绘制 贪 吃 蛇 的 蛇 号 变 


化 过 程 。 


对 应 的 JS(pages/game/game.js) 代 码 片 段 如 下 : 


Pagel { 

/ ¥¥x 
* 自 定义 函数 -- 游戏 画面 刷新 
x/ 

gameRefresh: function() { 
// 将 当前 坐标 添加 到 贫 吃 蛇 的 运动 轨迹 坐标 数组 中 
snakeMap. push( { 

Y:y 

}) 


// 数 组 只 保留 蛇 身 长 度 的 数据 ,如果 蛇 前 进 了 , 则 删除 最 旧 的 坐标 
if (snakeMap. length > +t) { 

snakeMap. shift( ) 
} 


// 绘制 贫 吃 迪 


18 . this. drawSnalke( ) 


19 . 

20. // 在 画布 上 绘制 全 部 内 容 
21. this. ctx. drawl ) 

22. 

23. // 根 据 方向 移动 蛇 头 的 下 一 个 位 置 
24. Switch (direction) { 
25. case 1: 

26. Y -= WwW 

21. break 

28. case 2: 

29. Yy 十 三 可 

30 break 

31. Case 3: 

32. xX 一 = W 

33. break 

34. case 4: 

35. XxX += Ww 

36. break 

37. } 

38. 上 

39. }) 


然后 在 game. js 中 修改 自 定义 函数 gameStart, 使 用 setInterval() 方 法 设置 在 间隔 规定 的 
时 间 后 重复 调用 gameRefresh 已 达到 游戏 画面 刷新 的 效果 。 修 改 后 的 gameStart 图 数 如 下 : 


1. Page({ 

7 / xx 

3 * 目 定 义 图 数 -- 司 动 游戏 

4 x 

3 gameStart: function() { 

6. // 初 好 化 蛇 号 长 度 (代码 上 略 ) 

7 // 初 好 化 蛇 号 坐标 (代码 上 略 ) 

8 // 随 机 生成 贪 吃 蛇 的 初始 蛇 头 坐标 (代码 略 ) 
9 // 随 机 生成 蛇 的 初始 前 进 方 回 (代码 略 ) 

1] 


0. 

11. // 每 隔 time 毫秒 刷新 一 次 游戏 内 容 

和 var that = this 

13. this. interval = setInterval(function() { 
14. that. gameRefresh( ) 

15. }, time) 

16. Fs 

17. }) 


最 后 在 game. js 的 onLoad 图 数 中 调用 gameStart, 使 动画 效果 启动 。 
修改 后 的 onLoad 本 数 如 下 : 


1. Pagel({ 

2 关头 

3 < 生命 周期 函数 -一 监听 页 面 加 载 
4 x/ 

ee onLoad: function(options) { 

6 // 蝎 新 游戏 刷新 时 间 ( 代 码 略 ) 

7 // 创 建 画布 上 下 文 (代码 略 ) 

8 


9 . // 开 始 游戏 
10. //this. gameStart() 


12. +) 


运行 效果 如 图 14-15 所 示 。 


(a) 代号 蛇 的 初始 位 置 (b) 领 虹 蛇 癌 右前 进 
图 14-15” 贫 吃 蛇 的 蛇 身 绘制 效果 


3) 方 问 键 逻 辑 实 现 

贪 吃 蛇 是 依靠 玩家 按 画 面 上 的 方 癌 键 进 行 上 、 下 \ 左 、 右 方 问 切换 的 ,因此 
修改 game. wxml 页 面 中 的 4 个 方 回 键 < button >, 为 其 绑 定 点 击 事件 。 

WXML(pages/game/game. wxml) 代码 修 改 后 如 下 : 


1 <Vlew Class = 'container'> 

2 <! 一 一 当前 分 数 提示 (代码 略 ) -一 > 

3 

4. <! 一 一 游戏 画布 (代码 略 ) -一 > 

3. 

6 <! 一 一 方向 键 -一 > 

7 < vlew class= 'btnBox'> 

8 < button bindtap = 'up'> 个 </button > 

9 . < View> 

10. < button bindtap = 'left'><—</button > 
11. < button bindtap = 'down'> y </button > 
12. < button bindtap = 'right'>—></button > 
13. </view > 

14. </ View > 

15. 


16. <!-- “重新 开始 ?按钮 (代码 略 ) -> 

17. </view> 

在 game. js 文件 中 添加 日 定义 函数 up、down,left 和 right, 分 别 用 于 实现 贪 吃 蛇 回 上 、 下 、 
左右 4 个 方 回 的 移动 。 对 应 的 JSCpages/ygame/ygame. js) 代 码 片 段 如 下 : 


1. Page({ 

2 / 关 基 

3 < 上 自 定 义 函 数 -- 监听 方向 键 : 上 
4 x/ 

= up: function() { 
6 direction = 1 
7 }, 

8 

9 


/ xx 


10. * 自 定义 函数 -- 监听 方向 键 : 下 


YE */ 

12. down: function() { 

13. direction = 2 

14. 上 

15. 

16. /x 

17. x 自 定义 阔 数 -- 监听 方向 键 : 左 
18. x*/ 

19. left: function() { 

20. direction = 3 

21. jj} 

22. 

23. /xx 

24. * 自 定义 函数 -- 监听 方向 键 : 右 
25. */ 

26. right: function() { 

27。 direction = 4 

28. 外 

29. }) 


运行 效果 如 图 14-16 所 示 。 


下 
Er 


(a) 仙 甩 蛇 同 右前 进 


图 14-16 ” 贫 吃 蛇 的 方向 改变 


(b) 代用 蛇 改 变 方 同 


绘制 食物 逻辑 实现 

接 下 来 需要 在 画布 上 为 贪 吃 蛇 绘 制 食 物 。 食物 每 次 将 在 随机 网 格 位 置 出 现 , 占 一 格 位 置 。 
食物 每 次 只 在 画面 中 呈现 一 个 ,直到 被 蛇 头 触 碰 表 示 吃 掉 方 可 在 原先 的 位 置 清 除 ,并 在 下 一 个 
随机 位 置 重新 产生 。 

1) 初始 化 食物 数据 

对 应 的 JS(pages/game/game.js) 代 码 片 段 添加 如 下 : 


1. Pagel(l{ 

2, /xx 

3 * 月 定义 函数 -- 局 动 游戏 

4 * 

5 gameStart: function() { 

6 /7 初始化 蛇 吴 长 度 ( 代 人 码 略 ) 

7 // 初 始 化 蛇 吴 坐标 (代码 略 ) 

8. // 随 机 生成 贪 吃 蛇 的 初始 蛇 头 坐标 (代码 略 ) 

9. // 随 机 生成 蛇 的 初始 前 进 方 向 (代码 略 ) 

10. 

Te // 随 机 生成 食物 的 初始 坐标 

12. //foodX = Math.floor(Math.random() 关 width / w) x¥ w 
了 3， / /foodY = Math.floor(Math.random() * height / w) 关 w 
14. 

15. // 每 隔 time 坚 秒 刷新 一 次 许 戏 内 容 ( 代 码 略 ) 

16. ” 

17. }) 


2) 绘制 食物 
在 game. js 中 声明 自 定义 函数 drawFood, 专 门 用 于 绘制 食物 ,对 应 的 JS 
(pages/game/game.]js) 代 码 片 段 如 下 : 


1. Pagel{ 

2 / 

3 * 自 定义 函数 -- 绘制 食物 
4. */ 

5. drawFood: function() { 
6 

了 

8 


let ctx = this.ctx 
// 设 置 食物 的 填充 颜色 
8. ctx. setFillStyle( 'red') 
9. // 绘 制 食物 
10. ctx. fillRect(foodX, foodY, w, w) 


然后 在 game. js 中 修改 月 定义 图 数 gameRefresh ,在 该 图 数 中 调用 drawFood 图 数 在 指定 
的 位 置 绘 制 食物 。 对 应 的 JS(pages/game/game.js) 代 人 码 厂 段 如 下 : 


1. Pagel{ 

2 / xx 

3 * 明定 义 函 数 一 -游戏 画面 刷新 
4 x / 

5. gameRefresh: function() 1{ 

6 // 在 随机 位 置 绘制 一 个 食物 

7 this. drawFood!( ) 

8 


9. // 将 当前 坐标 诊 加 到 贫 吃 蛇 的 运动 轨迹 坐标 数组 中 (代码 略 ) 

10. // 数 组 只 保留 蛇 号 长 度 的 数据 ,如 末 蛇 前 进 卫 , 则 删除 最 旧 的 坐标 (代码 略 ) 
11. // 绘 制 贪 吃 由 (代码 略 ) 

1 // 在 画布 上 绘制 全 部 内 容 ( 代 人 码 略 ) 

13. // 根 据 方 回 移动 紫 头 的 下 一 个 位 置 ( 代 码 略 ) 
14. Ts 

15. +}) 


运行 效果 如 图 14-17 所 示 。 

3) 吃 到 食物 的 判定 

当 蛇 头 和 食物 出 现在 同一 个 方 格 中 时 判 ，msins-E 罗 
定 蛇 吃 到 了 食物 ,此 时 食物 消失 、 当 前 分 数 坛 国 晤 呈 voer 
加 10 分、 蛇 和 号 增加 一 格 , 并 且 在 随机 位 置 重 视频 讲解 
新 生成 下 一 个 食物 。 

修改 目 定 义 函 数 gameRefresh, 对 应 的 JS(pages/game/ 
game. js) 代 码 片 段 添 加 如 下 : 


1. Page({ 

2 / x 

3 * 月 定义 函数 -- 游戏 夯 面 刷新 
4. x*x/ 
2 

6 

7 


gameRefresh: function() { ee | 
// 在 随机 位 置 绘制 一 个 食物 (代码 略 ) 人 
// 将 当前 坐标 浴 加 到 贪 吃 凡 的 运动 轨迹 坐标 数组 中 
(代码 略 ) 
8. // 数 组 只 保留 蛇 号 长 度 的 数据 , 如果 蛇 前 进 了 , 则 删除 最 旧 的 坐标 (代码 上 略 ) 
9. /7 绘制 贪 吃 几 (代码 略 ) 


10. 

11. // 吃 到 食物 的 判定 

12. if (foodX == x && foodY == y) { 

i // 吃 到 一 次 食物 加 10 分 

14. let score = this.data. Score + 10 

和 this. setDatal( { 

16. score: score 

ya }) 

18. 

19. // 随 机 生成 下 一 个 食物 的 初始 坐标 

20. foodX = Math.floor(Math.random() * width / w) * w 
2 foodY = Math.floor(Math.random() x* height / w) x¥ w 
22. 

23. // 在 新 的 随机 位 置 绘制 食物 

24. this. drawFood( ) 

25. 

26. // 蛇 身长 度 加 1 

27. 七 十 十 

28 . } 

29 


30， ”// 在 画布 上 绘制 全 部 内 容 (代码 略 ) 

31. ”// 根 据 方向 移动 蛇 头 的 下 一 个 位 置 (代码 上 略 ) 
32, 村 

33. 月 


运行 效果 如 图 14-18 所 示 。 


(a) 贷 吃 蛇 疝 右 负 进 (b) 贷 甩 蛇 吃 到 上 囊 一 个 食物 
图 14-18 ” 贫 吃 蛇 的 方向 改变 


其 中 图 14-18(a) 是 尚未 吃 过 食物 的 贪 吃 蛇 向 右前 进 的 画面 ,此 时 蛇 身 为 3 个 网 格 长 度 、 当 
前 分 数 为 0 分 ; 图 14-18(b) 是 贪 吃 蛇 已 经 吃 到 了 第 一 个 食物 的 画面 ,此 时 蛇 身 长 度 增加 1 格 、 
当前 分 数 更 新 为 10 分 ,并 且 在 新 的 位 置 出 现 了 食物 。 

碰撞 检测 逻辑 实现 Et 

如 果 蛇 头 撞 到 了 游戏 画面 的 任意 一 边 或 者 撞 到 蛇 身 均 判 定 为 游戏 失败 ， 守 否认 疆 
此 时 弹出 提示 对 话 框 告知 玩家 游戏 失败 的 原因 ,并 提示 其 重新 开始 。 玩 家 点 “RE 人 
击 对 话 框 上 的 “确定 ”按钮 则 可 以 开始 下 一 局 游戏 。 ree 

在 game. js 中 创建 自 定义 函数 detectCollision 用 于 进行 蛇 与 障碍 物 的 磁 。 全 站 入 
撞 检 测 。 碰 撞 检测 需要 检测 两 种 可 能 性 ,一 是 蛇 头 撞 到 了 四 周 的 墙壁 ,二 是 蛇 头 撞 到 了 蛇 身 。 
无 论 哪 一 种 情况 发 生 都 判定 游戏 失败 。 

对 应 的 JS(pages/game/game.js) 代 码 片 段 添 加 如 下 : 


1. Pagelt{ 

~ / x 

3 * 自 定义 函数 -- 碰撞 检测 

4. */ 

5. detectCollision: function() { 

6 // 如 果 蛇 头 撞 到 了 四 周 的 墙壁 ,游戏 失败 

7 if (x > width || y> height || x<0||y<0)f{ 
8 


return 1 

9. } 

10. 

11. // 如 果 蛇 头 撞 到 了 蛇 身 ,游戏 失败 

12. for (var i = 0; i < snakeMap. length; i++) { 

13. if (snakeMap[i].x == x && snakeMap[i].y == y) { 
14. return 2 


1 } 


16. } 


17. 

18. // 没 有 磁 撞 
19. return 0 
20.  ), 

21. }) 


该 函数 具有 3 种 返回 值 , 分 别 表示 不 同 的 含义 。 

。 返回 值 为 0: 表示 本 次 没有 碰撞 到 障碍 物 , 游 戏 继 续 ; 

。 返回 值 为 1: 表示 蛇 头 碰撞 到 了 游戏 画布 任意 一 边 的 墙壁 ,游戏 失败 ; 

。 人 返回 值 为 2: 表示 蛇 头 碰撞 到 了 蛇 号 ,游戏 失败 。 

然后 在 game. js 中 修改 gameRefresh 图 数 ,要 求 一 旦 游戏 失败 则 弹出 提示 对 话 框 。 
对 应 的 JS(pages/game/game.js) 代 人 码 片 段 修改 如 下 、 


1. Page({ 

2. /xx 

3 * 目 定义 图 数 -- 游戏 男 面 刷新 

4 x / 

5 gameRefresh: function() { 

6 // 在 随机 位 置 绘制 一 个 食物 (代码 略 ) 

7 // 将 当前 坐标 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 (代码 上 略 ) 
8. // 数 组 只 保留 蛇 屿 长 度 的 数据 , 如果 蛇 前 进 了 , 则 删 际 最 旧 的 坐标 (代码 上 略 ) 
9. // 绘 制 贪 吃 蛇 (代码 略 ) 

10. // 吃 到 食物 的 判定 (代码 略 ) 

11. // 在 画布 上 绘制 全 部 内 容 ( 代 人 码 略 ) 

1 // 根 据 方 各 移动 蛇 头 的 下 一 个 位 置 (代码 略 ) 


13. 

14. // 碰 撞 检 测 , 返回 值 为 0 表示 没有 撞 到 障碍 物 
15. let code = this.detectCollision() 
16. if (code != 0) { 

TF // 游 戏 停 止 

18. clearInterval(this. interval) 
19. 

20. Var msg = "" 

21. if (code == 1) { 

22. msg = ' 失 败 原 因 : 撞 到 了 墙壁 ' 
23. } else if (code == 2) { 

24. msg = ' 失 败 原 因 : 撞 到 了 蛇 身 ' 
25. } 

26 . 

27 . wx. ShowModal( { 

28. title: ' 游 戏 失败 ,是 否 重 来 ?'， 
29. content: msg, 

30. success: res => 1 

31. if (res.confirm) { 

32. // 重 新 开始 游戏 

33. this. gameStart() 

34. } 

35. } 

36. }) 

37. } 

38. } 

39. |}) 


加 上 碰撞 检测 后 的 游戏 运行 效果 如 图 14-19 所 示 。 


(a) 颌 吃 蛇 碰撞 到 博克 (b) 信 吃 蛇 磁 撞 到 蛇 母 
图 14-19 ”碰撞 检测 提示 男 面 


重新 开始 游戏 


修改 game. wxml 代码 ,为 “重新 开 妈 ”按钮 妃 加 日 定义 函数 的 点 击 事件 。 
WXML(pages/game/game. wxml) 代 人 码 片 段 修改 如 下 : 


< Vlew Class = 'container'> 


<!--“ 重 新 开始 ?按钮 -一 > 

< button type = 'warn' bindtap = 'restartGame'> 重 新 开始 </button > 
</view> 
在 game. js 文件 中 添加 restartGame 函数 ,用 于 重新 开始 游戏 。 
对 应 的 JSCpages/gameygame. js) 代 人 码 记 有 段 添加 如 下 : 


[i 


1. Page({ 

2 / 

3. < 自 定义 函数 -- 重新 开始 游戏 
4. x/ 

5S restartGame: function() { 

6. clear Interval(this. interval) 
7 this. gameStart() 

8. ), 

Sa 

运行 效果 如 图 14-20 所 示 。 

ga 返回 首页 时 停止 游戏 


当 诉 戏 中 途 点 击 左 上 角 返 回 键 返 回首 页 时 还 需要 停止 诉 戏 ,在 game. js 
的 onUnload 了 匈 数 中 集 止 定时 右 即 可 。 对 应 的 JS(pages/game/game.]js) 代 码 


事 新 开始 


(a) 游戏 初始 运行 画面 (b) 重新 开始 游戏 画面 
图 14-20 ” 点 击 “ 重 新 开始 ”按钮 的 效果 


1. Pagel({ 

二 / xx 

3 * 生命 周期 函数 -- 监听 页 面 凶 载 
4. x*/ 

2 onUnload: function() { 

6. // 游 戏 停止 

7. ClearInterval(this. interval) 
8. }, 

9 


此 时 所 有 的 代码 内 容 就 全 部 完成 了 。 


14.7.1 应 用 文件 代码 展示 


app.json 代码 展示 

app. json 文件 的 完整 代码 如 下 : 

1. { 

2 “ pages :| 

3. "pages/ index/index", 

4. "pages/game/game" 

5. 1s 

6. “Window :{ 

7， " navigationBarBackgroundColor": "#E64340", 
8. "navigqationBarTitleText" : "全 吃 蛇 小 放 戏 " 
9. } 


Li | 
| 


14. 


app. wxss 代码 展示 
app. wxss 文件 的 完整 代码 如 下 : 


/< 页 面容 天 样式 <*/ 


-Container { 
height: 100vh; 
display: flex; 


align ~ items: center; 


1 

2 

3 

4 

= flex— direction: column; 

6 

7 Justify— content: space ~ evenly; 
8 


7.2 页 和 面 文件 代码 展示 


首页 代码 展示 
WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


1. <view class = “Contaliner > 

2 < image src = '/ images/snake01. png' bindtap = 'goToGame' data - level = 'easy'></image > 
3. < image src = '/images/snake02. png' bindtap = 'goToGame' data - level = 'hard'></ image > 
4. </view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


1. /x 关卡 图 片 */ 

2. imagef 

CE width: 400rpx; 
4 height: 400rpx; 
3。 4 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


1. Page({ 

2 / x 

3 * 月 定义 也 数 一 跳 转 游戏 页 面 
4 x*/ 

3 goToGame: function(e) { 

6 // 获 取 游 戏 模式 

7 let level = e.currentTarget. dataset. level 
8 /7/ 洲 戏 界面 刷新 的 则 隅 时 间 , 单 位 为 坚 秒 (数字 越 大 , 蛇 的 速度 越 慢 ) 
9. let time = 0 

10. 

// 简 单 模式 

12. if (level == 'easv') { 

13. time = 500 

14. } 

15. // 困 难 模 式 

16. else if (level == 'hard') { 
17. time = 200 

18. } 

19. 

20. // 跳 转 到 游戏 页 面 

21. wx. navigateTo( { 


22. url: '../game/game?time = ' + time, 


23. 


24. }， 

25. }) 

游戏 页 代码 展示 

WXML 文件 (pages/game/game. wxml) 的 完整 代码 如 下 ， 
1. <Vlewclass = 'container'> 

; <! 一 一 关卡 提示 -一 > 

3. <View> 当 前 分 数 : {{score}}</view> 

4. 

5. <! 一 一 游戏 画布 -一 > 

6. < canvas canvas — jd = 'myCanvas'></canvas > 
了 

8. <! 一 一 方向 键 -一 > 

9 . < VlIewClass = “btnBoX > 

10. < button bindtap = 'up'> 个 </button > 

11. < Vlew> 

12. < button bindtap = 'left'><—</button > 
13. < button bindtap = 'down'> y </button > 
14. < button bindtap = 'right'>—></button > 
15. </view> 

16. </view > 

17. 

18. <!-- “重新 开始 ”按钮 --> 

19. <button bindtap = 'restartGame'> 重 新 开始 </button > 
20. </view> 


WXSS 文件 (pages/game/game. wxss) 的 完整 代码 如 下 : 


] 
2 
1 
4. 
6 
7 
8 
9 


/* 游戏 画布 样式 x* / 


canvas { 


} 


border: lrpx solid # E64340; 
width: 320px; 
height: 320px; 


/* 方向 键 按钮 整体 区 域 * / 
.btnBox { 


} 


display: flex; 
flex— direction: column; 
align ~ items: center:; 


. /* 方 器 键 按钮 第 二 行 * / 


. btnBox view { 


display: flex; 
flex— direction: row; 


. /x* 所 有 方 品 键 按钮 * / 


. btnBox button { 


} 


width: 90rpx; 
height: 90rpx; 


/x* 所 有 按钮 样式 * / 

. button { 

margin: 10rpx; 

background — color: # E64340; 
color: white; 


.} 


JS 文件 (pages/game/game.js) 的 完整 代码 如 下 : 


Do DNPp 


上 
> 


Pp 
D0 


// ============= 
// 游 戏 参 数 设置 


Var snakeMap = [|] 
// 蛇 号 单元 格 大 小 


var Ww = 20 


.// 方 回 代码 : 上 为 1、 下 为 2、 左 为 3. 布 为 4 
. Var direction = 1 

. // 蛇 的 初始 坐标 

. Var x = 0 

. vary = 0 

. // 食 物 的 初始 坐标 

. Var ftoodX = 0 

. Var foodY = 0 

. // 夯 布 的 宽 和 高 

. Var width = 320 

. Var height = 320 

. // 游 戏 界面 刷新 的 间隔 时 间 , 单 位 为 毫秒 (数字 越 大 , 蛇 的 速度 越 慢 ) 
. Var time = 1000 


. Pagel({ 


f 尖 半 

x 页 面 的 初始 数据 

关 / 
data: { 

score: 0 // 游 戏 当 前 分 数 
}s 


/fx 
* 月 定义 函数 一 启动 游戏 
x*x/ 

gameStart: function() { 
// 初 始 化 游戏 分 数 
this. setDatal { 

score: 0 

}) 
// 初 始 化 蛇 号 长度 
t = 3 
// 初 始 化 蛇 身 坐标 
snakeMap = [|] 


// 随 机 生成 贪 吃 蛇 的 初始 蛇 头 坐标 
x = Math.floor(Math. random() * width / w) 关 w 
y = Math.floor(Math. random() * height / WwW) 关 w 


// 随 机 生成 蛇 的 初始 前 进 方向 
direction = Math. ceil(Math. random() 关 4) 


// 随 机 生成 食物 的 初始 坐标 
foodX = Math.floor(Math. random() 关 Width /w) 关 w 
foodY = Math.floor(Math.random() 关 height /w) 关 w 


// 每 隔 time 毫秒 刷新 一 次 游戏 内 容 
Var that = this 
this. interval = setInterval(function() { 
that. gameRefresh!( ) 
}, time) 
}, 


/ 
* 肯定 义 函数 一 绘制 食物 
ef 

drawFood: function() { 
let ctx = this. ctx 


// 设 置 食物 的 填充 颜色 

ctx. setFillStylel( 'red'’) 

// 绘 制 食物 

ctx. fillRect(foodxX, foodY, w, w) 
}, 
/ 关 关 

* 目 定 义 图 数 -- 绘制 贪 吃 蛇 

x/ 


drawSnake: function() { 
let ctx = this. ctx 
// 设 置 蛇 身 的 填充 颜色 
ctx. setFillStyle( 'lightblue') 
// 绘 制 全 部 蛇 号 
for (var i = 0; i< snakeMap. length; i++) { 
ctx. fillRect( snakeMap[ i|].x, snakeMap[i].y, WwW w) 
} 
}, 


/ 关 基 
* 目 定 义 函 数 一 碰 撞 检 测 
x*/ 
detectCollision: function() { 
// 如 果 蛇 头 撞 到 了 四 周 的 墙壁 ,游戏 失败 
if (x> width || v> height || x<0||vy<0)1{ 
return 1 
} 
// 如 果 蛇 头 撞 到 了 蛇 号 ,游戏 失败 
for (var 1 = 0; i< snakeMap. length; i++) { 


if (snakeMap[i].x == x && snakeMap[i].y == Y) { 
return 2 


109 . 
110. 
111. 
112. 
113. 
114. 
115. 
116. 
117. 
118. 
119. 
120. 
121. 
122. 
123. 
124. 
125. 
126. 
121. 
128. 


// 没 有 人 碰 拉 
return 0 


}, 


/ x 
* 日 定义 函数 -游戏 画面 刷新 
x/ 

gameRefresh: function() { 
// 在 随机 位 置 绘制 一 个 食物 
this. drawEood( ) 


// 将 当前 坐标 诊 加 到 贪 吃 紫 的 运动 轨迹 坐标 数组 中 
snakeMap. push( { 


Li 


总 至 


:了 
}) 


// 数 组 只 保留 蛇 屿 长 度 的 数据 , 如果 蛇 前 进 了 , 则 删除 最 旧 的 坐标 
if (snakeMap. length > 七 ) { 

snakeMap. shift() 
} 


// 绘 制 贪 吃 蛇 
this. drawSnake{ ) 


// 吃 到 食物 的 判定 
if (foodX == x && foodY == Y) { 
// 吃 到 一 次 食物 加 10 分 
let Score = this. data. Score + 10 
this. setDatal { 
score: score 


}) 


// 随 机 生成 下 一 个 食物 的 初始 坐标 
foodX = Math.floor(Math.random() 关 width/w) x w 
foodY = Math.floor(Math. random() x* height /w) 关 w 


// 在 新 的 随机 位 置 绘制 食物 
this. drawFood({ ) 


// 蛇 号 长 度 加 1 


七 十 十 


// 在 画布 上 绘制 全 部 内 容 
this. ctx. drawl ) 


// 根 据 方向 移动 蛇 头 的 下 一 个 位 置 
switch (direction) { 
Case 1: 
Y 一 = WwW 
break 
Case 2: 
了 T= Ww 
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// 碰 撞 检 测 , 人 返回 值 为 0 表示 没有 撞 到 障碍 物 
let code = this. detectCollision() 
if (code != 0) 1 

// 游戏 停止 

clearIinterval(lthis. interval) 
Var msg = 
if (code == 1) { 

msg = “失败 原因 : 撞 到 了 墙壁 ' 
} else if (code == 2) { 

msg = "失败 原因 : 撞 到 了 蛇 里 ' 
} 


wx. ShowModal ( { 
title: ' 游 戏 失败 ,是 否 重 来 ?'， 
content: msg, 
success: res =>1 
if (res.confirm) { 


// 重 新 开始 游戏 
this. gameStart( ) 
} 
} 
}) 
} 
Ye 
/ xx 
* 目 定 义 图 数 一 监 听 方 回 键 : 上 
x*/ 


up: function() 1{ 
direction = 1 


}, 


/ 关 关 
* 目 定义 图 数 
关 / 


down: function( ) { 


监听 方向 键 : 下 


direction = 2 


}, 


/ 
x 自 定义 函数 
x*/ 

left: function() { 
direction = 3 


监听 方向 键 : 左 


213. 小 


215. /x 
216. x 目 定 义 困 数 一 监听 方 问 键 : 右 
217. x/ 


218. right: function() { 


219 . direction = 4 

220. }, 

221. 

222. /x 

223.  * 日 定义 函数 一 重新 开始 游戏 
224. x / 


225. restartGame: function() { 


226. this. gameStart( ) 

227. }， 

228. 

229. /xx 

230. x 生命 周期 图 数 一 监听 上 页面 加 载 
231. 妆 

232. onLoad: function(options) { 

233. // 时 新 游戏 刷新 时 间 

234. time = options.time 

2345. 

236. // 创 建 画 布 上 下 文 

237. this.ctx = wx.createCanvasContext!( 'myCanvas') 
238. 

239. // 开 始 游 戏 

240 . this. gameStart( ) 

241. }, 

242. 

243. /x 

244. x* 生命 周期 函数 一 监听 页 面色 载 
245. x*/ 

246. onUnload: function() { 

247. /7 游戏 俘 止 

248 ClLearInterval(this. interval) 
249 }， 


小 程序 前 有 By 并 绪 合 合 实例 


数据 的 高 校 新闻 网 


基于 模拟 


在 学 习 了 小 程序 的 基础 知识 和 各 类 API 以 后 ,读者 不 妨 尝试 独立 动手 创建 一 个 小 程序 前 
端 综合 设计 实例 。 本 竟 将 从 零 开 始 详解 如 何 仿 网 易 新 闻 小 程序 实现 一 个 基于 模拟 数据 的 简易 


局 Ps 


。 综合 应 用 所 学 知识 创建 完整 的 前 端 新 闻 小 程序 项 目 ; 
。 能 够 在 开发 过 程 中 熟练 掌握 真 机 预览 .调试 等 操作 。 


本 项 目 一 共 需 要 3 个 页 面 , 即 首页 .新 闻 页 和 个 人 中 心 页 ,其 中 首页 和 个 四 喇 和 


人 中 心 页 需要 以 tabBar 的 形式 展示 ,可 以 点 击 tab 图 标 互 相 切 换 。 


15.1.1 首页 功能 需求 


1、>. 


1、. 


首页 功能 需求 如 下 : 

(1) 首页 需要 包含 约 灯 片 播放 效 采 和 新 闻 列 表 。 
(2) 幻灯 片 至 少 要 有 3 幅 图 片 目 动 播放 。 

(3) 点 击 新 闻 列 表 可 以 打开 新 闻 全 文 。 


1.2 新闻 页 功能 需求 


新 闻 页 功能 需求 如 下 : 

(1) 阅读 新 闻 全 文 的 页 面 需要 显示 新 闻 标 题 . 图片、 正文 和 日 期 。 
(2) 允许 点 击 按钮 将 当前 阅读 的 新 闻 添 加 到 本 地 收藏 夹 中 。 

(3) 已 经 收藏 过 的 新 闻 也 可 以 点 击 按钮 取消 收藏 。 


1.3 个 人 中 心 页 功能 需求 
个 人 中 心 页 功能 需求 如 下 : 


(1) 未 登录 状态 下 显示 登录 按钮 ,用户 点 击 后 可 以 显示 微 信 头像 和 了 昵称。 


视频 讲解 


二 7 微 信 小 程序 开发 实战 - 微 课 视 频 版 区 人 


(2) 登录 后 谈 取 当前 用 户 的 收藏 夹 ,展示 收藏 的 新 闻 列 表 。 
(3) 收藏 夹 中 的 新 闻 可 以 直接 点 击 查看 内 容 。 


(4) 未 登录 状态 下 收藏 夹 显示 为 空 。 


本 项 目 创建 选择 空白 文件 夹 newsDemo ,效果 如 图 15-1 所 示 ，。 
单 击 “新 建 ?按钮 完成 项 目 创 建 , 然 后 准备 手动 创建 页 面 配置 文件 。 


EL= 国 导入 项 目 


newsDermo 
EWwxdemo_ workspacemnewsDemo 


wx19079110a0i01e8a 


车 无 AppIlD 可 注册 
或 使 用 测试 号 


小 程序 
人 @ 不 使 用 云 服务 
小 程序 - 云 开发 
小 程序 - 云 开发 为 开发 者 提供 煞 据 库 、 存 信和 云 函 数 等 完整 的 云 谋 支持 。 无 需 找 


建 服务 器 ， 使 用 平台 提供 的 AP|I 进行 核心 业务 开发 ， 即 可 实现 小 程序 快速 上 线 和 
选 代 。 了 解 详情 


javaScript ~| 


图 15-1 小 程序 项 目 填写 效果 示意 图 


15.3.1 创建 页 面 文件 


项 目 创建 完毕 后 ,在 根 目 录 中 会 生成 文件 夹 pages 用 于 存放 页 面 文件 。 rE 
一 般 来 说 首页 默认 命名 为 index, 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 名 巴 沁 
称 可 以 自 定义 。 本 项 目 需要 创建 3 个 页 面 文件 ,包括 index( 首 页 页 面 ) detail 和 全 
(新 闻 页 面 ) 和 my( 个 人 中 心 页 面 )。 

具体 操作 如 下 . 

。 将 app. json 文件 pages 属性 中 的 pages/logs/logs 删除 ; 

。 在 app. json 文件 pages 属性 中 继 经 追加 pages/ detail/ detail 和 pages/my/my; 

。 按 快捷 键 Ctrl 十 S 保存 修改 ,然后 会 在 pages 文件 夹 下 日 动 生成 detail 和 my 目录 。 


15.3.2 删除 和 修改 文件 


具体 操作 如 下 : 

。 删除 utils 文件 夹 中 的 所 有 内 容 ; 

。 删除 pages 文件 夹 下 的 logs 目录 及 其 内 部 所 有 内 容 ; 

。 删除 index. wxml 和 index. wxss 中 的 全 部 代码 ; 

。 删除 index. js 中 的 全 部 代码 ,并 且 输 入 关键 词 *“page” 找 到 第 二 个 选项 按 回 车 让 其 自动 
补 全 图 数 ,如 图 15-2 所 示 ; 


index js 四 


iindex.1s 


function | 
SEE 
WD getCurrentPages 
全 > package 
pF pauseBackegroundAudio 
PpP previewImape 
canvasPutImageData 


15-2 输入 关键 词 创建 Page 函数 


。 删除 app. wxss 中 的 全 部 代码 ; 
。 删除 app. js 中 的 全 部 代码 ,并 且 输 入 关键 词 *“app” 找 到 第 一 个 选项 按 回 车 让 其 自动 补 
全 困 数 ,如 网 15-3 所 示 。 


app.js 各 
1 /fapp.js 


2 吾 品 | 
function 0 
l 而 有 而 


到 15-3 输入 关键 词 创建 App 函数 


15.3.3 创建 其 他 文件 


本 节 创 建 其 他 自 定义 文件 ,本 项 目 还 需要 创建 以 下 两 个 文件 夹 。 
。 images: 用 于 存放 图 片 素材 ; 
。 nutils: 用 于 存放 公共 JS 文件 。 
文件 夹 名 称 由 开发 者 自 定 义 , 创 建 方式 与 pages 文件 夹 创建 方式 完全 相同 。 
添加 图 片 文件 
本 项 目 将 在 tabBar 栏 中 用 到 两 组 图 标 文件 ,图 片 素材 如 图 15-4 所 示 。 
右 击 目录 结构 中 的 images 文件 夹 ,选择 “ 便 盘 打开 ?命令 ,将 图 片 复制 .粘贴 进去 。 
创建 公共 JS 文件 
右 击 utils 文件 夹 ,选择 “新 建 ”| JS 命令 ,输入 “common” 按 回 车 键 即 创建 公共 函数 


common. js, 如 图 15-5 所 示 。 


15.4.1 导航 栏 设计 


window 属性 进行 重新 配置 来 自 定义 导航 栏 效果 。 更 改 后 的 app. json 文件 代 四 守 


会 人 所 


(a) Index.png (b) index_blue.png (ci my.png (d) my_blue.png 
图 15-4 标 素 材 展示 


全 部 完成 后 的 目录 结构 如 图 15-6 所 示 。 


+ QQ 


v [SS images 
index.png 
index_blue.png 
my.png 
my_blue.png 

v [SS pages 

™ [SS detail 
过 JS detail.js 
by [DD images {} detailjson 
<> detail.wxml 
wxss detall,Wxss 
v [SS index 
JS index.js 
{} index.json 
< > index.wxml 
wxss INdex.wXxss 
目录 "my 
J5S my.js 
Page {} myjson 
Component < > my.Wxml 


Wass MY.WXSS 


| : v ED utils 


新 建 JS 文 件 J5 common.js 


JS app.js 
{} app.json 


wxss Aapp.WXSS 


{} project.config.json 


图 15-5 新建 JS 文件 图 15-6 页面 文 件 创建 完成 


此 时 ,页 面 文件 配置 全 部 完成 ,15.4 市 将 正式 进行 页 面 布 局 和 样式 设计 。 


Ee 
ee 


小 程序 默认 导航 栏 是 黑 底 白字 的 效果 ,可 以 通过 在 app. json 中 对 


码 如 下 : 视频 讲解 


"pages" : [代码 略 ]， 

“window : { 
"navigationBarBackgroundColor" : " # 328EEB", 
"navigationBarTitleText": "我 的 新 闻 网 "， 
“navigationBarTextStyle : white- 


} m 10.45 


i 


} 我 的 新 间 网 


上 述 代码 可 以 更 改 导 航 栏 背 景色 为 蓝 色 、 字 体 为 白色 ， 图 15-7” 自 定义 导航 栏 效果 


效果 如 图 15-7 所 示 。 


15.4.2 tabBar 设计 


代码 如 下 : 


15.4.3 页 面 设 计 


所 示 。 


首先 在 app. json 中 追加 tarBar 的 相关 属性 代码 ,更 改 后 的 app. json 文件 


1. I{ 

2 "pages" : [代码 略 ]， 

3. "window" : {代码 略 }，, 

4. "tabBar”: { 

5. "color" : " 亲 000"， 

6. "selectedColor" : " 闪 328EEB"， 

7. "list”": [ 

8. { 

9. "pagePath" : "pages/index/index", 

10. "iconPath" : "images/index. png , 

11. "selectedIconPath" : " images/index blue. png , 
12. "text": "首页 " 

13. }, 

14. 

15. "pagePath" : "pages/my/my", 

16. "iconPath" : "images/my. png", 

17. "selectedIconPath" : "images/my blue. png", 
18. "text" : "我 的 " 

19 . } 

20 . ] 

21. } 

22. HH 全 


全 


运行 效 朱 如 图 15-8 所 示 ,此 时 已 经 可 以 切换 首页 和 个 图 15-8 tabBar 完成 效果 图 
人 中 心 页 了 。 


首页 设计 
首页 主要 包含 两 部 分 内 容 , 即 幻灯 片 滚 动 和 新 闻 列 表 , 页 面 设 计 如 图 15-9 
计划 使 用 如 下 组 件 。 


。 义 ] 灯 厂 . < swiper > 组 件 ; 
。 新 闻 列 表 : < view > 容 着, 内 部 使 用 数组 循环 。 


二 和 Chat 


幻灯 片 滚动 效果 


新 闻 列 表 


15-9 ”首页 设计 图 


WXML(pages/index/index. wxml) 代 码 如 下 : 


必 个 lo 搬 


<!-- 幻灯 片 滚动 --> 

< swiper indicator - dots autoplay interval = "5000" duration = "500"> </ swiper > 
<!-- 新 闻 列 表 -一 > 

<view id = 'news 一 list'> 这 是 新 闻 列 表 </view> 


接着 为 组 件 添加 wx:for 属性 循环 显示 幻灯 片 内 容 和 新 闻 列 表 数 据 。 
修改 后 的 WXML(pages/index/index. wxml) 代 码 如 下 : 


DD 
和 


<! 一 一 女 ] 灯 片 深 动 一 一 > 
< swiper indicator ~ dots = "true" autoplay = "true” interval = "5000" duration= "500"> 
< block wx:for = "{{swiperImg}}" wx:key = 'swiper{ {index}}'> 
< swiper - item> 
< image src="{{item. src}}" class = "slide- image" /> 
</ swiper - item > 
</block> 
</ swiper > 
<!-- 新 闻 列 表 -一 > 


. <Vlew ld= 'news — list'> 


< view class = 'list - item' wx:for ="{{newsList}}” wx:for - item= "news" wx:key= "{{news. id}}"> 


< image src= '{{news. poster}} '></image > 
< text>O{{news.title}} -- {{news.add date} }</text > 
</view> 
. </view> 


相关 WXSS(pages/index/index. wxss) 代 人 码 厂 段 如 下 : 


1. 
2 


/ x* swiper 区 域 样式 */ 
/x*1 一 1 swiper 组 件 */ 


swiper { 


3 
4 height: 400rpx; 

5,. |} 

6. /xl1-2swiper 中 的 图 片 */ 
1. swiper image { 

8 width: 100%.; 

9 . height: 100 委 ; 

10. | 
11. /* 新 闻 列 表 区 域 样式 */ 
12. /x*2 一 1 新闻 列表 容 胡 x*/ 
13. #news— list { 

14. min— height: 600rpx; 
Ls padding: 15rpx; 

16. | 

17. /x* 2 一 2 列表 项 目 */ 

18. .list— iteml{ 

19. display: flex; 


20. flex— direction: row; 
21. border — bottom: lrpx solid gray; 
22. |] 


23. /*2 一 3 新 闻 图 片 */ 
24. .list— item imagel 
ps width:230rpx; 

26. height: 150rpx; 
1 margin: 10rpx; 
28，} 

29. /x*2-4 新 闻 标 题 */ 
30. .list— item text{ 
31. width: 100%S.- 

32. lJine ~ height: 60rpx; 
33. font — size: 10pt; 
34. } 


为 了 进行 布局 和 样式 效果 的 预览 ,还 需要 在 JS 文件 的 data 中 临时 录入 几 个 测试 数据 。 
相关 JSCpages/index/index. js) 代 人 码 厂 段 如 下 : 


1. Page(l{ 

2. data: { 

站 // 幻 灯 片 素材 

4. swiperImg: [ 

5 { src: 'http://www. ahnu. edu. cn/ _ local/A/C7/68/C2C9E5E2161A466A2D54D21A63C 
DD3FEC40 4EBBB. jpg?e = .jpg'}, 

6. { src: 'http://www. ahnu. edu. cn/ _ local/7/CC/BD/47349A7168770AC24EB5535B2AF 
35829829 6E24D. png?e = .png'}), 

7. { src: 'http://wuw. ahnu. edu. cn/ local/2/BB/2D/9FEB9B8DOCAS5E059B2C1C7E65BD 
67A0410C 3A71F. png?e = .png'} 

8. ], 

9. // 临 时 新 闻 数 据 

10. newsList:[{ 

11. id: '264698 '， 

12. title: “俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书 记 顾 家 山 一 行 并 接受 < 力 冈 译文 全 集 >* 赠 予 
13. poster: 'http://www. ahnu. edu. cn/ _ local/A/C7/68/C2C9E5E2161A466A2D54D21A63C 
DD3FEC40 4EBBB. jpg?e = .jpg', 

14. add date: "2018 - 03 - 05 


15. }] 


微 信 小 程序 开发 实战- 


当前 效果 如 图 15-10 所 示 。 

申 图 可 见 ,此 时 可 以 显示 约 灯 片 播放 和 一 条 临时 新 闻 。 由 于 尚未 获得 新 
闻 数 据 , 所 以 暂时 无 法 显示 完整 的 新 闻 列 表 , 仅 供 作 为 样式 参考 。 

个 人 中 心 页 设计 

个 人 中 心 页 主要 包含 两 个 版 块 , 即 登录 面板 和 ”我 的 收藏 >。 登 录 面 板 用 
于 显示 用 户 的 微 信 头像 和 昵称 “我 的 收藏 ?用 于 显示 收藏 在 本 地 的 新 闻 列 表 。 
页 面 设计 如 图 15-11 所 示 。 


俄罗斯 联邦 驻 华 大 佳 杰 尼 索 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 》 赠 予 
一 一 2018-03-05 


我 的 收藏 


图 15-10 ”首页 效果 图 15-11 个 人 中 心 页 设计 图 


计划 使 用 < view > 组 件 进行 整体 布局 ,对 自 定 义 的 id 名 称 解释 如 下 。 
。 myLogin: 登录 面板 ; 
。 mylcon: 微 信 头像 图 卢 ; 
。 nickName: 微 信 了 昵称; 
。 myFavorites: 我 的 收藏 。 
WXML(pages/my/my. wxml) 代 但 如 下 : 
<! 一 一 登录 面板 -一 > 
<view id= 'myLogin'> </view> 


<! 一 一 我 的 收藏 -一 > 


<view id= 'myFavorites'> </view> 


NP 


接着 为 这 两 个 区 域 添加 内 容 , 修 改 后 的 WXML(pages/my/my. wxml) 代 人 码 如 下 : 
1. <!-- 登录 面板 -一 > 


2. <Vlew 1d= mybogln > 


3 < block > 

4. < image id = 'myIcon' src= '{{src}} '></inmage > 

5 <text id = 'nickName'>{ {nickName} }</text > 

6. </ block > 

7. </view> 

8. <!-- 我 的 收藏 -一 > 

9. <Vlew id= 'myFavorites'> 

10. < text > 我 的 收藏 (1)</text > 

11. <!-- 收藏 的 新 闻 列 表 -- > 

有 < View id = 'news - list'> 

13. < View class = 'list - item' wx: for =" {{newsList}}” wx: for - item = " news" wx: key = 
"{{news. id} }"> 

14. < image src= '{{news. poster}}'></image > 

15. <text>O{{news.title}} -- {{news.add date}}</text > 
16. </view> 

LT, </view> 

18. </view> 


WXSS(pages/my/my. wxss) 代 码 如 下 : 


iD 说 悦 忆 Cu ho 搬 


于 
-0 


18. 
| 
. /* 我 的 收藏 * / 


/* 登录 面板 */ 
# myLogin{ 
background - color: # 328EEB; 
height: 400rpx; 
display: flex; 
flex— direction: column; 
align— items: center; 
Justify— content: space ~ around; 


} 


. /x*1 一 1 头像 图 片 */ 


# mvyIcont{ 
width: 200rpx; 
height: 200rpx; 
border 一 radius: 50 和 要 ; 


.} 
. /x* 1 一 2 微 信和 昵称 */ 


# nickNamef 


color: white; 


#myFavoritest{ 


padding: 20rpx; 


.1} 


由 于 新 闻 列 表 的 样式 与 首页 完全 相同 ,没有 必要 重复 样式 代码 ,否则 会 造成 元 余 , 可 以 将 
index. wxss 中 新 闻 列 表 样 式 的 相关 代码 挪 到 app. wxss 中 公共 使 用 。 
app. wxss 的 代码 如 下 : 


in 


/* 新 闻 列 表 区 域 样式 * / 
/x*2 一 1 新 闻 列 表 容 副 * / 
# news 一 List { 
min— height: 600rpx; 
padding: 15rpx; 


6. } 

7. /Vx*2-2 列 表 项 目 */ 
8 .list— Item{ 

9 . display: 工 Lex; 


10. flex— direction: row; 
11. border — bottom: lrpx solid gray; 
12。 |} 


13. /*2 一 3 新闻 图 片 x*/ 
14. .list— item imagef{ 
15. width:230rpx; 

16. height: 150rpx; 
17. margin: 10rpx; 

18. } 

19. /*2-4 新 闻 标 题 *V/ 
20. .list— item textt{ 
21. width: 100%.; 

20. display: block; 
3 line ~ height: 60rpx; 
24. font — size: 10pt.; 
5 


为 了 进行 布局 和 样式 效果 的 预览 ,还 需要 在 JS 文件 的 data 中 临时 录入 测试 数据 。 
JS(pages/my/my.js) 代 码 片 段 如 下 : 


1. Pagel(lf{ 

2 data: 1 

3 // 临 时 微 信用 尸 上 昵 称 和 头像 

4. nickName: ' 未 登录 '， 

本 src: '/images/index. png', 

6 // 临 时 收藏 夹 新 闻 数 据 

7 newsList: [{ 

8. id: “264698 '， 

9. title: ' 俄 罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 觉 委 书 记 顾 家 山 一 行 并 接受 « 力 冈 译文 全 集 » 赠 予 '， 
10. poster: 'http://www. ahnu. edu. cn/ local/A/C7/68/C2C9E5E2161A466A2D54D21A63C 
DD3FEC40 4EBBB. jpg?e = .jpg', 

11.。 add date: "2018 - 03- 05' 

Ee 上 

13, } 

14. }) 


当前 效果 如 图 15-12 所 示 。 

由 图 可 见 , 此 时 可 以 显示 完整 的 样式 效果 。 由 于 尚未 获得 微 信用 户 数 据 和 收藏 在 本 地 的 
缓存 数据 ,所 以 暂时 无 法 显示 实际 内 容 , 仅 供 作 为 样式 参考 。 

新 闻 页 设计 

新 闻 页 是 用 于 给 用 户 训 览 新 闻 全 文 的 , 震 要 用 户 点 击 首页 的 新 闻 列 表 , 然 
后 在 新 窗口 中 打开 该 页 面 。 新 闻 页 包括 新 闻 标 题 . 新闻 图 片 、. 新 闻 正 文 和 新闻 
日 期 ,页 面 设 计 如 图 15-13 所 示 。 | 

由 于 暂时 没有 做 点 击 跳 转 的 人 逻辑 设计 ,所 以 可 以 在 微 信 web 开发 者 工具 视频 讲解 
顶端 工具 栏 中 找到 "普通 编译 ?下拉 选项 ,选择 “添加 编译 模式 ”, 然 后 追加 对 于 
detail 页 面 的 直接 浏览 效果 ,如 图 15-14 所 示 。 

此 时 预览 就 可 以 直接 显示 detail 页 面 了 ,设计 完毕 后 再 切换 回 “ 普 通 编译 ”模式 显示 首页 
(index) 即 可 。 


TYTN 了 1 :5 五 


我 的 新 闻 网 


得 交加 网 


几 司 “ 任 罗 斯 联邦 驻 华 大 使 志 尼 索 去 会 见 校 党 
要 书记 顾家 山 一 行 并 接受 《 力 网 译文 全 
捉 》 刚 子 一 2018-03-05 


15-12 个 人 中 心 页 效果 图 15-13 ”新 闻 页 设计 图 


自 走 义 编译 条 件 


模式 名 称 。 | detal 

启动 页 面 pages/detail/detall 

启动 参数 如 : name=vendor&color=black 
进入 场景 ”| 时 认 


| 下 次 编译 时 模拟 更 新 ( 需 1.9.90 及 以 上 基础 库 版 本 ) 


15-14 添加 新 闻 页 的 编译 模式 


计划 使 用 < view > 组 件 进行 整体 布局 ,对 自 定 义 的 class 名 称 解 释 如 下 。 


container: 整体 容 前; 
title: 新 闻 标 题 区 域 ; 
poster: 新 闻 图 厂区 域 ; 
content: 新 闻 正 文 区 域 ; 
add_date: 新 闻 日 期 区 域 。 


WXML(pages/detail/ detail. wxml) 代 码 如 下 : 


1 
2 
3 
4. 
i 
6 
了 
8 


< VlIew class= Contalner > 

<View class = 'title'>{{article. title} }</view > 

< vliew class = 'poster'> 

< image src = '{{article. poster}}' mode = 'widthFix'></image > 

</View> 

<view class = 'content'>{{article. content} }</view> 

<view class = 'add date'> 时 间 : {{article.add date} }</view> 
</view > 


微 信 小 程序 开发 实战 - 微 课 视频 版 妇 O 


WXSS(pages/detail/ detail. wxss) 代 人 码 如 下 : 
/ x 整体 容器 x / 


. Containert! 

padding: 15rpx.; 

text 一 align: center; 
} 
/* 新 闻 标 题 * / 
.titletf 

font 一 size: 14pt; 


名 门 四 mm 民 wb 


line— height: 80rpx; 
. /* 新 闻 图 片 */ 
. .poster lmage{ 
width: 100%.; 


> 
> 它 


请 搬 情 
心 [wo 


，} 
. /* 新 闻 正 文 */ 


. Content 1 


一 
< 中 与 1 hn 


text 一 align: left; 
font — size: l2pt. 
line 一 helght: 60rpx; 


中 
= 


.1 
. /* 新 闻 日 期 */ 
.add datel 

font 一 size: 12Ppt， 


[5 
(Nn 


text ~ align: right; 
line— height: 30rpx; 
margin — right: 25rpx; 
margin — top: 20rpx; 


YN 
-Wr 全 


.| 


为 了 进行 布局 和 样式 效 朱 的 预览 ,还 需要 在 JS 文件 am 
的 data 中 临时 录入 一 条 测试 数据 。 
JS(pages/ detail/ detail. js) 代 码 厂 段 如 下 : 俄罗斯 联邦 驻 华 大 使 未 尼 索 夫 会 见 校 党 委 书 


1. Pagel 记 顾 家 山 一 行 并 接受 《 力 风 译文 全 集 》 赠 予 
此 data: { 加 j 

3 article:{ 

4 id: '264698 '， 

5 title: ' 俄 罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 


委 书 记 顾 家 山 一 行 并 接受 « 力 冈 译文 全 集 » 赠 予 '， 
6. poster: 'http://wwuw. ahnu. edu. cn/ local/AM/ 
C7/68/C2C9E5E2161A466A2D54D21A63C DD3FEC40 4EBBB. jpg? ”| 本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 干 ， 俄 罗斯 驻 华 信使 


e= .Jpg', 


杰 尼 豪 夫 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 


content: ' 本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 , 俄 罗 | 记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
a pe ty 见 了 校 党 委 ”| 的 + 套 《 力 风 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参 赞 
书记 顾家 山 , 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 的 十 套 “| 梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 芯 尔 、 大 使 助理 、 塔 斯 
« 力 由 译文 全 集 ». 俄 罗斯 驻 华 大 使 馆 参 赞 梅 利 尼 科 娃 、 大 使 馆 | 社 ie 者 ,我 校 校 办 主任 曾 黎 明 、 出 版 社 社 长 张 奇 
一 秘 伊 苹 尔 、 大 使 助理 、 塔 斯 社 记 者 ,我 校 校 办 主任 曾 黎 明 、 出 | 才 , 我 校 杰 出 校友 、 俄罗斯 人 民 友 谊 勋章 和 利 哈 弄 
版 社 社 长 张 奇 才 ， 我 校 杰出 校友 .俄罗斯 人 民 友 谊 勋章 和 利 哈 去 院 士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 文 


8. -3 date: '2018 - 03 - 05， 时 间 : 2018-03-05 
9. } 

10. })} 

ie 图 15-15 新闻 页 效果 图 


由 图 可 见 ,此 时 可 以 显示 完整 的 样式 戏 琳 。 由 于 尚未 获得 新 闻 数 据 , 有 所 以 暂时 无 法 根据 用 
户 点 击 的 新 闻 标题 入 口 显 示 对 应 的 新 闻 内 容 , 仅 供 作为 样式 参考 ， 
此 时 页 面 布局 与 样式 设计 就 已 完成 ,15.5 节 将 介绍 如 何 进行 逻辑 处 理 。 


15.5.1 公共 逻辑 


正常 来 说 数据 应 该 由 网 站 群 管理 平台 提供 新 闻 接口 ,由 于 隐私 安全 、 开 发、 障 骨 荣光 
者 条 件 限制 等 一 系列 问题 ,这 里 采用 模拟 数据 进行 代替 。 有 条 件 的 开发 者 可 回 守 叶 痊 
以 使 用 第 三 方 免费 或 付费 新 闻 接口 (例如 聚合 数据 等 ) ,或 自行 搭建 服务 器 提 各 汪汪 得 
供 接口 。 

假设 已 经 获取 到 了 数据 ,将 其 放 在 公共 JS 文件 (utils/common.js) 中 ,代码 片段 如 下 ，: 


1 const news = [{ 

id: "264698 '， 

3. title: “俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书 记 顾 家 山 一 行 并 接受 < 力 站 译文 全 集 > 赠 耶 '， 
4 poster : 'http://www.ahnu. edu.cn/ local/M/C7/68/C2C9E5E2161A466A2D54D21A63C DD3FEC40_ 
4EBBB. Jpg?e = . ]Pg "， 

5 content:' 本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 , 俄 罗斯 驻 华 大 使 杰 尼 索 夫 在 北京 俄罗斯 驻 华 大 使 馆 
会 见 了 校 世 委 书记 屈 守山, 并 接受 了 我 校 出 版 社 赠 耶 俄罗斯 大 使 馆 的 十 套 « 力 办 译文 全 集 ». 俄罗斯 驻 华 
大 使 馆 参 赞 梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 万 尔 .大 使 助理 , 培 斯 社 记者 ,我 校 校 办 主任 兽 歼 明 、 出 版 社 社 长 
张 奇才 ,我 校 杰出 校友 俄罗斯 人 民 友 谊 勋章 和 利 哈 乔 夫 院 士 奖 获得 者 ,中 国 俄罗斯 文学 人 妇 究 会 会 长 刘 
文 飞 教授 每 参加 了 了 会见， 

6 . add date: "2018 一 03 一 05" 


9. id: '3056701， 

10. ”title: ' 我 校 学 子 在 全 省 第 八 届 少数 民族 传统 体育 运动 会 上 育 获 佳绩 '， 

11. poster: 'http://www.abhnu.edu.cn/ local/7/CC/BD/47349A7168770AC24EB5535B2AF 35829829 
6E24D. png?e = . png ， 

12. ”content: ' 本 网 讯 (体育 学 院 邹 华 刚 )11 月 18 日 至 23 日 ,由 安徽 省 人 民政 府 主 办 ,省 民 委 ,省 体 
育 局 和 蚌 塌 市 人 民政 府 承 办 的 安徽 省 第 八 届 少数 民族 传统 体育 运动 会 在 蚌 塌 市 成 功 举 行 ,全 省 16 个 地 
市 代表 团 近 1300 名 运动 员 .教练 员 裁判 员 参 加 了 本 次 运动 会 .\n 本 届 运 动 会 共 设 武术 ,民族 式 摔跤 , 律 
球 .足球 . 押 加 .高 脚 鄞 速 .陀螺 和 板鞋 竞 速 等 8 个 项 目 . 我 校 组 建 了 由 周 翡 雅 . 王 和 章 、 王 强 等 23 名 少数 
民族 和 尝 生 组 成 的 运动 员 队 伍 , 代 表 无 湖 市 参加 了 局 和 脚 竞 速 .武术 、 跟 球 . 陀 螺 和 板鞋 苋 速 等 5 个 大 项 的 比 
赛 .经 过 激烈 角逐 ,我 校 运动 健儿 共 获 得 4 个 一 等 奖 ( 第 1 名 )，6 个 二 等 奖 (第 2 一 4 名 )，9 个 三 等 奖 ( 第 
5 一 8 名 ) 的 优 弄 战绩 ,出 色 地 完成 了 比赛 任务 . "， 

13. add date: '2018— 11 - 27， 

14. }, 

15. 1 

16. id: '304083', 

17. title: ' 我 校 学 子 代 表 国 家 队 获 中 国 羽 毛 球 公 开赛 男 双 亚军 '， 

18. poster: 'http://www.ahnu.edu.cn/_ _local/2/BB/2D/9FEB9B8DOCASEO059B2C1C7E65BD 67A0410C_ 
3AT1F. png?e = .png ， 

19. ”content: ' 本 网 讯 (体育 学 院 徐 梦 涛 )11 月 11 日 ,世界 羽 联 中 国 羽 毛 球 公 开赛 在 福州 落下 帷幕 . 
在 男子 双打 半 决 弄 中 ,我 校 2018 级 运动 训练 专业 学 生 齐 强 与 搭档 何 济 填 以 2 : 0 战胜 印尼 组 合 瑞 哈 
末 。， 阿 山 / 享 德 拉 , 普 级 决 完 . 决 完 中 ,这 对 年 轻 组 合 以 1:2 负 于 现世 界 排 名 第 一 的 印度 尼 西 亚 组 合 , 获 
得 了 本 次 比赛 的 亚 革 .这 也 是 谭 强 在 本 年 度 内 获得 的 最 好 成 绩 . "， 

20. add date: '2018-—11-14' 

21. ] 


这 里 用 了 3 条 新 闻 记 录 作 为 示范 ,开发 者 可 以 上 自行 添加 或 修改 新 闻 内 容 。 
接 下 来 在 common. js 中 添加 自 定 义 困 数 getNewsList 和 getNewsDetail ,分 别 用 于 获取 
新 闻 列 表 信 息 和 指定 ID 的 新 闻 正 文 内 容 。 代 码 片 段 如 下 : 


1. // 获 取 新 闻 列 表 

2. function getNewsList() { 

E let list = [|]; 

4. for (var 1 = 0; 1 < news.length; I++) { 
9, let ob] = {}; 

6. obj. id = news[i]. id; 

了 . obj. poster = news|[i].poster; 

8. obj.add date = news[i].add date; 

9 . ob]j .title = news[i].title; 

10. 1ist. push(ob] ) ; 

11. } 

1 return list: // 返 回 新 闻 列 表 
13. |】 

14. 


15，// 获 取 新 闻 内 容 
16. function getNewsDetail(news1D) { 
17. let msg = { 


18. code: '404', // 没 有 对 应 的 新 闻 
19. news: {} 
20. 本 


21. for (var 1 = 0; i < news. length; i++) { 
22. if (newsID == news[i].id) 1 /7 匹配 新 闻 ID 编号 


3 msg.code = '200'; // 成 功 

24. msg.news = news[i]; /7 更 新 当前 新 闻 内 容 
a break; 

26. } 

27. } 

28. return msg; // 返 回 查 找 结 果 

29. |} 


最 后 需要 在 common. js 中 使 用 module. exports 语句 又 露 图 数 出 口 ,代码 片段 如 下 : 


1. module. exports = | 

2 getNewsList: getNewsList, 

3. getNewsDetail: getNewsDetail 
4. |] 


现在 就 完成 了 公共 逻辑 处 理 的 部 分 。 
然后 需要 在 各 页 面 的 JS 文件 顶端 引用 公共 JS 文件 ,引用 代码 如 下 : 
Var Common = require('../../utils/common. js') /1 引用 公共 JS 文件 


需要 注意 这 里 暂时 还 不 支持 绝对 路 径 引 用 ,只 能 使 用 相对 路 径 。 


15.5.2 首页 逻辑 


首页 主要 有 两 个 功能 击 要 实现 ,一 是 展示 新 闻 列 表 ,二 是 点 击 新 闻 标 题 可 以 跳 荡 对 应 的 髓 


容 页 面 进行 浏览 。 


全 YO 第 15 章 小 程序 前 端 综合 


加 新 闻 列 表 展 示 加 x 
新 闻 列 表 展示 使 用 了 {{newsList}) ,因此 需要 在 页 面 JS 文件 的 onLoad ER 


负数 中 获取 新 闻 列 表 , 并 更 狐 到 data 属性 的 newsList 参数 中 。 
相关 JSCpages/index/index. js) 代 人 码 厂 段 如 下 : 


1. Page({ 

2 onLoad: function(options) { 
3 // 获 取 新 闻 列 表 
4. let list = common,. getNewsList() 
5. // 里 新 列表 数据 
6 this. setData( {newsList:1ist}) 
7 } 
i 


此 时 页 面 效 果 如 图 15-16 所 示 。 
车 希 望 用户 点 击 新 闻 标 题 即 可 实现 跳 ” 聘 ee 时 避 ee 
z : Eo 记 顾家 山 一 行 并 缔 芝 《 力 网 评 文 全 集 》 赠 子 
导 , 帘 要 首先 为 新 闻 列 表 项 目 添 加 点 击 | 
事件 。 辐 天 对 因 | “ 芝 信 了 << 匡 本 从 区 中 国志 于 人 开讲 另 
相关 WXML(pages/index/index. wxml) 代码 族 段 修 
改 如 下 : 
1. <!-- 新闻 列 表 --> 


2. <vVview id= 'news— list'> 


—2018-03-05 


3. <View class = 'list ~— item' wx:for = "{{newsList}}" 

wx:for— item= "news" wx:key = "{{news. id}}"> 

4. < image src = '{{news. poster}} '></image > 

二 < text bindtap = 'goToDetail' data - id = '{{news. 

id}}'>Of{{news.title}} -=- {{news.add date} }</text > 图 15-16 ”首页 新 闻 列 表 展 示 
6. </View> 


7. </view> 


具体 修改 为 第 5 行 加 粗 字 体 部 分 ,为 < text > 组 件 添加 了 自 定义 触摸 事件 浮 数 goToDetail， 
并 且 使 用 data-id 属性 携带 了 新 闻 ID 编号 。 
然后 在 对 应 的 detail. js 文件 中 添加 goToDetail 图 数 的 内 容 , 代 码 族 段 如 下 : 


1. Page({ 

2. / x 

3. < 月 定义 函数 --- 跳 转 新 页 面 浏 览 新 闻 内 容 
4. x*/ 

5. goToDetail: function(e) { 

6. / /获取 扒 市 的 data 一 id 数据 

Ts let id = e.currentTarget. dataset. id; 
8. // 携 市 新 闻 ID 进行 页 面 跳 转 

9 . wx. navigateTol( { 

10. url: '../detail/detail?id= '+ jd 
11. }) 

12. } 

13. 月 


此 时 已 经 可 以 点 击 跳 转 到 detail 页 面 , 并 且 成 功 携 囊 了 新 闻 ID 数据 ,但 是 仍 需 在 detail 
页 面 进行 携 市 数据 的 接收 处 理 才 可 显示 正确 的 新 闻 和 内容 。 


\ 程 序 开发 实战- 微 课 视 频 版 EJO 


15.5.3 新 闻 页 逻辑 


新 闻 页 主要 有 两 个 功能 需要 实现 ,一 是 显示 对 应 新 闻 , 二 是 可 以 添加 / 取 | rol 
消 狐 闻 收 藏 。 二 

显示 对 应 新 闻 

在 首页 多 和 辑 中 已 经 实现 了 页 面 跳 苇 并 携 市 了 新 闻 ID 编号 ,现在 需要 在 新 
团 页 接收 ID 编号 ,并 查询 对 应 的 新 闻 内 容 。 

相关 J]JS(pages/ detail/ detail. js) 代 码 上 请 段 如 下 


CE Tn 1 E 
re 2 


Pagel { 
onLoad: function(options) { 


// 获 取 页 面 跳 转 来 时 携带 的 数据 
let id = options. 1d 


// 获 取 到 新 闻 内 容 
if(result. code == '200"){ 


1 

2 

3 

4 

5 let result = common. getNewsDetail( id) 
b 

7 

8 this. setData( {article:result. news}) 
9 


此 时 重新 从 首页 点 击 新 闻 跳 转 就 可 以 发 现 已 经 能 够 正确 显示 标题 对 应 的 新 闻 内 容 了 。 
运行 效果 如 图 15-17 所 示 。 


LITTT M/s 


俄罗斯 联邦 驻 华 大 使 杰 尼 率 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 冈 译文 全 集 》 赠 予 
E 本 


“能 村 媚 联 其 驻 华 大 使 本 尼 人 案 去 会 见 校 党 委 书 
记 顾 京山 一 行 并 统 受 《 力 网 译文 全 人 》 赠 了 巴 
——2 lB-03-05 
十 。 我 校 学 子 代 叶 国家 队 获 中 国 羽毛 玩 公 开讲 于 
双 亚 衬 2018-11-14 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 

杰 尼 索 夫 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 

记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 

的 十 套 《 力 冈 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参 筠 

一 梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 芝 尔 、 大 使 助理 、 塔 其 

s 生 忱 学 下 在 全 省 入 儿 居 少数 民族 舍 统 陈 育 运 
一 晶 社 记者 ， 我 校 校 办 主任 曾 黎 明 、 出 版 社 社 长 张 奇 
中 动人 县 上 喜 蓝 佳 蓝 一 -一 018-11-27 

本 于 才 ,我 校 杰 出 校友 、 俄 罗斯 人 民 友 这 勋章 和 利 哈 乔 
夫 院 士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 文 

飞 教授 等 参加 了 会 见 。 


时 间 : 2018-03-05 


(a) 首页 新 闻 列 表 (b) 浏览 收藏 的 新 闻 
图 15-17 ”在 首页 列表 中 浏览 新 闻 的 效果 
贺 添加 /取消 新 闻 收 茂 
修改 detail. wxml 代码, 退 加 两 个 < button > 组 件 作 为 添加 /取消 收藏 新 闻 的 按钮 ,并 使 用 


wx:if 和 wx:else 属性 使 其 每 次 只 存在 一 个 。 
WXML(pages/detail/ detail. wxml) 代 码 片 段 添加 如 下 ， 
<Vliew class= ‘container'> 


<view class = 'title'>{{article. title} }</view > 
< Vlew class = 'poster'> 


1 

2 

3 

4 < image src = '{{article. poster}}' mode = 'widthFix'></image > 

he </view> 

6 < View class = 'content'>{{article. content}}</view> 

了 < View class = 'add date'> 时 间 : {{article.add date}}</view> 

8 < button wx: if = '{{isAdd}}' plain bindtap = 'cancelFavorites'> 旬 已 收藏 </button > 
9 . < button wx:else plain bindtap = 'addFavorites'> 间 点击 收藏 </button> 

10. </view> 


对 应 的 WXSS(pages/detail/detail. wxss) 代 但 片段 添加 如 下 : 


/ x“ 点击 收 藏 * 按 钮 * / 
buttont{ 
width: 250rpx; 
height: 100rpx; 
margin: 20rpx auto; 


} 
对 应 JSCpages/detail/ detail. js) 中 的 onLoad 函数 代码 片段 修改 如 下 : 


Dn 


1. onLoad: function(options) { 

2. // 获 取 页 面 跳 转 来 时 携 市 的 数据 
3. let 1d = options. 1d 

4., 

5. // 检 查 当 前 新 闻 是 否 在 收藏 夹 中 
6. Var article = wx.getStorageSync(i1d) 
7. // 已 存在 

8. if (article != "'') f 

9. this. setDatal { 

10. article:article., 

11. isAdd: true 

12. }) 

13. } 

14. // 不 存在 

15. else { 

16. let result = common. getNewsDetail(id) 
17. // 获取 到 新 闻 内 容 

18. if (result.code == '200') { 
19. this. setDatal { 

20. article: result. news, 
21. 1sAdd: false 

2 }) 

2 } 

24. } 

-ns }, 


继续 在 detail. js 文件 中 追加 addFavorites 和 cancelFavorites 加 数 ,用 于 点 击 添 加 /有 取消 新 
收藏 。 对 应 JS(pages/ detail/ detail. js) 中 的 函数 代码 片段 修改 如 下 : 


1. Pagelf 
时 // 语 加 到 收藏 夹 


3: addFavorites: function(options) { 


视频 版 多 OO 


4 let article = this. data.article; 
5. Wx. setStorageSync(article. id, article); 
6. this. setData({ isadd: true }); 

| ， 

8 // 取 消 收藏 

9. cancalFavorites: function() { 

10. let article = this.data. artlcle; 
11. WX. removeStorageSync(article. id) ; 
12. this, setData({ isadd: false }) ， 
13. Bs 

14. }) 


// 获 取 当 前 新 闻 
/7 添加 到 本 地 缓存 
// 更 新 按钮 显示 


// 获 取 当 前 新 闻 
// 从 本 地 绥 存 删除 
// 更 新 按钮 显示 


现在 从 首页 开始 预览 ,选择 其 中 任意 一 篇 新 闻 进 入 detail 页 面 ,并 尝试 点 击 按钮 收藏 和 取 


消 收藏 。 


此 时 页 面 效 果 如 图 15-18 所 示 。 


重要 重要 本 WCC 有 本 [把 14:51 


< 址 的 新 间 网 


俄罗斯 联邦 驻 华 大 使 杰 尼 京 夫 会 见 校 党 委 书 
记 顾 家 山 一行 并 接受 《 力 冈 译文 全 集 》 赠 予 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 
杰 尼 率 去 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 网 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参 赞 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 艾 尔 、 大 使 助理 、 塔 斯 
性 记者 ， 我 极 校 办 主任 曾 黎 明 、 出 版 社 社 长 张 奇 

才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友 这 勋 意 和 利 哈 乔 
堪 院 士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 文 
飞 教授 等 参加 了 会 见 。 

时 间 : 2018-03-05 


(a) 已 经 收藏 新 闻 


[RK Console SouUrces Netywork Security 


ITT 


< 


俄罗斯 联邦 驻 华 大 使 杰 尼 认 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 冈 译文 全 集 》 赠 了 予 


| 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 
杰 尼 索 夫 企 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 网 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参 赞 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 世 尔 、 太 使 助理 、 塔 斯 
社 记 者 ， 我 校 校 办 主任 曾 黎明 、 出 版 社 社 长 张 奇 
才 ， 我 校 杰 出 校友 、 俄 罗斯 人 民 友 谊 勋章 和 利 哈 乔 
夫 院 士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 文 
飞 教授 等 参加 了 会 见 。 

时 间 : 2018-03-05 


(b) 取消 收藏 新 闻 


Storage AppData Wxml Sensor Trace 


+ Object: /1g "264698' "ttle'"" 拱 客 黄岗 邢 半 六 信 仙 司 半 太 会 必 民 第 安 广 iD 全 沼 


(c) 添加 本 地 缓存 


Console Sources Network Security 


Audits Storage AppData Wxm|l Sensor “Trace 


Value 


\ 


(d) 删除 本 地 缓存 


图 15-18 ”新闻 页 中 “点 击 收藏 ”按钮 的 使 用 效果 


15.5.4 个 人 中 心 页 逻辑 


个 人 中 心 页 主要 有 3 个 功能 需要 实现 ,一 是 获取 微 信 用 户 信息 ; 二 是 获取 收藏 列表 ; 三 是 
浏览 收藏 的 新 闻 。 

获取 微 信 有 用户 信 息 

修改 my. wxml 代码 ,追加 < button > 
组 件 作 为 登录 按钮 ,并 且 使 用 wx:if 和 
wx:else 属性 让 未 登录 时 只 显示 按钮 , 登 
录 后 只 显示 头像 和 了 昵称 。 

WXML (pages/my/my. wxml) 代码 


片段 修改 如 下 : 了 _ 
用 咱 “俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 
1. <view id= myLogin'> 委 书记 顾家 山行 并 接受 《 力 网 译文 全 
2. <block wr:if = '{({isLogin}}'> od BB neds 
3. < image id = 'myIcon' src= '{{src}} '></image > 
4. < text id = 'nickName'>{ {nickName} }</text > 
- </block > 
6. < button wx:else> 未 登录 ,点 此 登录 </button> 
7. </view> 


此 时 页 面 效 果 如 图 15-19 所 示 。 

在 my. wxml 页 面 修改 < button > 组 件 的 代码 ,为 其 
追加 获取 用 户 信息 事件 ,代码 片段 如 下 : 

1. < button wx:else open ~- type = getUserInto- 

bindgetuserinfo = 'getMyInfo'> 

-a 未 登录 ,点 此 登录 

了 </button > 
其 中 open-type 王 "getUserInfo' 表 示 激 活 获 取 微 信用 户 信 息 功 能 ,然后 使 用 bindgetuserinfo 属 
性 表示 获得 的 数据 将 传递 给 肯定 义 图 数 getMyInfo ,开发 者 也 可 以 使 用 其 他 名 称 。 

在 my. js 文件 的 Page() 内 部 追加 getMyInfo 图 数 , 代 码 片 段 如 下 ， 


图 15-19 个 人 中 心 未 登录 状态 效果 图 


1. getMyInfo: function(e) { 

要 console. log(le. detail. userInfo) 

3. 小 

保存 后 预览 项 目 , 单 击 按钮 后 如 果 Console 控制 台 能 够 成 功 输出 用 户 信 息 数据 , 则 说 明 获 
取 成 功 ,如 图 15-20 所 示 。 

修改 my.js 文件 中 getMyInfo 图 数 的 代码 ,将 信息 更 新 到 动态 数据 上 ,代码 片段 如 下 : 


1. // 获 取 微 信用 户 信 息 

2. getMyInfo: function(e) { 

2 let info = e. detail. userInfo; 

4. this. setDatal { 

5. isLogin:true, // 确 认 登 录 状 态 
6. src: info. avatarUrl， 1/ /更 新 图 有 片 来 源 
了 nickName: info. nickName // 更 新 昵称 

8. }) 

9. 


}, 


[R | Console Sources Network Security Audits Storage AppData Wxml Sensor “Trace 


@ | top v | Filter Default levels ™ 


Vv{nickName: "向 小 WW@", gender: 2, Language: "zh CN", city: "Wuhu"”, province: "Anhui", .} 加 
avatarUrl: "https://wx.qloeo.cn/mmopen/vi 32/Q8J4TwGTfTJjer@sqPDflrMTdlVXBIGibHxibxXvyMONpcCo 
city: “Wuhu” 
country: "China” 

Eender: 2 
language: “zh_CN” 
nickName:" 周 小 几 咒 " 
province:; "Anhui" 

pb __proto_: Object 


图 15-20 ”Console 控制 台 输 出 内 容 


此 时 就 已 完成 登录 功能 , 预 多 效 果 如 图 15-21 所 示 。 


恒生 而 We hat 过 EE 100s [ml | masss WeChat = 14-02 LUD, [ml 


隋 的 订 闻 | 网 "es | 我 乓 雇 闻 网 | 


我 的 收藏 (1) 
“俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 [俄罗斯 联邦 驻 华 大 使 赤 尼 索 夫 会 见 校 党 
委 书 记 顾 家 山 一 行 并 接受 《 力 网 译文 全 委 书 记 顾 家 山 一 行 并 接受 《 力 同 译文 全 
尝 》 网 予 一 一 2018-03-05 集 )》 上 了 一 一 2018-03-05 


(a) 初始 页 面 效果 (b) 点 击 按钮 后 的 效果 
图 15-21 个 人 中 心 获取 微 信 用 户 信息 效果 图 
获取 收藏 列表 


修改 my. wxml 代码 ,将 "我 的 收藏 ”后面 的 数字 更 改 为 动态 数据 效果 。 
WXML(pages/my/my. Wxml) 代 人 码 片 段 如 下 : 


<text> 我 的 收藏 ({{num}})</text > 
对 应 JS(pages/ detail/ detail. js) 中 的 data 属性 代码 片段 修改 如 下 : 


继续 在 detail. js 文件 中 追加 getMyFavorites 困 数 ,用 于 展示 真正 的 新 闻 收 茂 


对 应 的 JSCpages/my/my.js) 代 码 厂 段 如 下 ， 


1. Pagel{ 

pF // 获 取 收 藏 列表 

3 getMyFavorites: function() 1{ 

4 let info = wx. getStorageInfoSync(); // 读 取 本 地 缓存 信息 
3 let keys = info. keys; // 获 取 全 部 key 信息 
6 let num = keys. length; // 获 取 收 藏 新 闻 数 量 
7 

8 let myList = [1]; 

9., for (var 1 = 0; i<num; i++) { 

10. let ob]j = wx.getStorageSync(kevys|[1|); 

11. myList. push{ ob]j); // 将 新 闻 添 加 到 数组 中 
12. } 

13. // 喝 新 收藏 列表 

14. this. setDatal { 

1 newsList: myList, 

16. num: num 

i 1); 

18. } 

19. }) 


列表 。 


修改 my. js 中 的 getMyInfo 函数 ,为 其 追加 关于 getMyFavorites 函数 的 调用 。 


对 应 的 JSCpages/my/my.]s) 代 码 片 段 如 下 : 


1. Page({ 

2 // 获 取 微 信用 户 信息 

3 getMyInfo: function(e) { 

4 let info = e. detail. userInfo; 
< this. setDatal { 
6 

7 

8 

9 


isLogin: true, // 确认 登录 状态 
src: info. avatarUrl]l, // 更 新 图 片 来 源 
nickName: info. nickName /7 更 新 昵称 
}) 

10. // 获 取 收 藏 列表 

11. this.getMyFavorites( ) ; 

12. } 

13. }) 


现在 从 首页 开始 预览 ,选择 其 中 任意 两 篇 新 闻 进 人 
detail 页 面 ,并 和 芝 试 点 击 收 藏 。 然 后 退出 切换 到 个 人 中 心 
页 ,登录 后 查看 收藏 效果 。 

此 时 页 面 效果 如 图 15-22 所 示 。 

考虑 到 登录 成 功 后 用 户 还 可 以 手动 更 改 新 闻 的 收藏 
状态 ,因此 修改 my. js 中 的 onShow 图 数 , 判 断 如 果 是 登 
录 状 态 就 刷新 一 下 收藏 列表 。 

对 应 的 JSCpages/my/my.js) 代 码 片 段 如 下 : 


1. Page({ 
2 / x 
- * 生命 周期 清 数 -一 监听 页 面 显示 


图 15-22 


周 小 风 所 


“性 宕 斯 联邦 鞋 步 大 使 赤 尼 案 夫 会 见 校 党 


委 书 记 导 家山 一 行 并 接受 《 力 闻 笃 广 全 
尝 》 赠 于 一 一 2018-03-05 

我 以 学 子 代表 国 家 有 队 获 中 国 羽 毛 球 公开 
寺田 观 亚 至 一 一 2018-11-14 


“我 的 收藏 "列表 效果 


4 关 1 

5. onShow: function() { 

6. // 如 果 已 经 登录 

7 if(this. data. IsLogin){ 
8 // 里 新 收藏 列表 

9. this. getMyFavorites( ) 
10. } 

11. } 

12. }) 

浏览 收藏 的 新 闻 


点 击 浏览 已 经 收藏 的 新 闻 和 首页 的 点 击 跳 转 新 闻 内 容 功 能 类 似 , 弟 先 修 
改 my. wxml 收藏 列表 的 代码 如 下 : 


<! 一 一 收藏 的 新 闻 列 表 -- > 


了 < TVTlIeW 1d = 'news— list'> 


E < view class = 'list ~ item' wx: for = "{{newsList}}” wx:for— item=" 
news" wx:key = "{{news. id}}"> 
< image src = '{{news. poster} } '></image > 


2 < text bindtap = 'goToDetail' data - id= '{{news. id}}'> 
6. OO{{news.title}}— {{news.add date}} 

</text > 

8 </view> 


具体 修改 为 第 5 行 加 粗 字 体 部 分 ,为 < text > 组件 添加 了 自 定义 触摸 事件 孙 数 goToDetail ,并 
日 使 用 data-id 属性 携带 了 新 闻 ID 编号 。 
然后 在 对 应 的 my. js 文件 中 添加 goToDetail 函数 的 内 容 , 代 码 片 段 如 下 : 
1. Page({ 
2 goToDetail: function(e) { 
3 // 获 取 携 带 的 data- id 数据 
4. let 1d = e.currentTarget. dataset. id; 
3 // 携 市 新 闻 ID 进行 页 面 跳 转 
6 . wx. navigateTol( { 
7 url: '../detail/detail?id= "+ id 
8 }) 
9 . } 
10. }) 


运行 效果 如 图 15-23 所 示 。 
15.5.5 清除 临时 数据 


最 后 需要 清除 或 注释 反 一 开始 为 了 测试 样式 录 人 的 临时 数据 ,以 侈 影 啊 

雷 要 清除 的 数据 如 下 。 

。 首页 (index. js) ，data 中 的 临时 新 闻 列 表 数 据 (newsList); 

。 新 闻 页 (detail. js): data 中 的 临时 新 闻 数 据 (article) ; 

。 个 人 中 心 页 (my. js): data 中 的 临时 收藏 夹 新 闻 数 据 (newsList)、 临 时 昵称 
(CnickName) 以 及 临时 头像 路 算 地 址 (src) 。 

此 时 带 有 模拟 新 闻 数 据 的 小 程序 前 端 项 目 “ 高 校 新 闻 网 ?就 全 部 完成 ,后 续 章 节 将 为 其 追 
加 后 痪 服务 大 和 数据 库 的 相关 内 容 。 


5 eChat= 1 | mmsssWVEChat s 15:21 1003% [ml 


< 找 的 新 闻 网 “0. 


俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 冈 译文 全 集 》 赠 予 


周 小 贝 名 


我 的 收 蔬 (2) 
* 俄 王 期 联 指 福 华 大 健 太 尼 案 夫 全 网 楼 党 本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 
委 节 记 用 守山 一 行 并 搂 受 《 力 网 译文 全 杰 尼 索 夫 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
从 》 赠 子 一 一 2018-03-05 记 顾家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
秋 我 校 学 子 代 专 国家 队 获 中 国 鸡毛 球 公 开 的 十 套 《 力 冈 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参赞 
轨 双 亚军 一 一 2018-11-14 悔 利 尼 科 娃 、 大 使 馆 一 秘 伊 蕊 尔 、 大 使 助理 、 塔 斯 
社 记者 ， 我 校 校 办 主任 曾 黎明 、 出 版 社 社 长 张 奇 
才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友 这 勋章 和 利 哈 乔 
夫 院 士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 文 
飞 教 授 等 参加 了 会 见 。 


时 间 : 2018-03-05 


(a) “我 的 收藏 * 列 表 (b) 浏 友 收藏 的 新 闻 
图 15-23 浏览 已 收藏 新 闻 的 效果 


15.6.1 应 用 文件 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


1. 1{ 

2 pages : [ 

二 "pages/ index/ index", 

4. "pages/my/my", 

5. "pages/detail/detail" 

6. ] ， 

了 .。 “Wincow : { 

8. "navigationBarBackgroundColor" : " # 328EEB", 
9. "navigationBarTitleText": "我 的 新 闻 网 " 

10. 

11. "tabBar”: { 

12. "color”": "并 000", 

13. "selectedColor" : " # 328EEB", 

14. "list”: |[ 

Rs { 

16. "pagePath" : "pages/ index/ index'" ， 

17 . “七 ext"”: “首页 ”， 

18. " iconPath" : " images/ index. png", 

19. "selectedIconPath" : "images/index blue. png" 


lw 
人 
一 -一 
™ 


1S. 


pages/my/my", 
"text" : "我 的 " ， 


"iconPath"”: ” images/ my. png", 


mm pagePath" : 


"selectedIconPath" : "images/my blue. png" 


app. wxss 文件 的 完整 代码 如 下 : 


Do 人 Np 


一 
= 


2 
心 i 


0.2 


1 
2 
二 
4 
3 


/* 新 闻 列 表 区 域 样式 * / 
/*2 一 1 新闻 列表 容 售 x* / 
#news— list { 
min— height: 600rpx; 
padding: 15rpx; 
| 
/* 2 一 2 列表 项 目 */ 
.1ist— iteml{ 
display: flex; 
flex— direction: row; 
border — bottom: lrpx solid gray; 


: J 
，/x*2 一 3 新 闻 图片 */ 
. .list— item imagef{ 

15. 


width:230rpx; 
height: 150rpx; 
margin: 10rpx; 


. 
. /x2-4 新 让 
. .Jist— item textt 


标题 * / 


width: 100%.; 
line 一 height: 60rpx.; 
font 一 size: 10pt; 


， 


// 模 拟 新 闻 数 据 
const news = [1 
id: '264698", 


title: ' 俄 罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 觉 委 书 记 顾 家 山 一 行 并 接受 « 力 冈 译 文 全 集 » 赠 子 '， 
poster: ' http://wuw. ahnu. edu. cn/ _ local/AM/C7/68/C2C9E5E2161A466A2D54D21A63C 


DD3FECA40 4EBBB. jpg?e = .jpg', 


6. 


馆 会 


content: ' 本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 , 俄 罗斯 驻 华 大 使 杰 尼 索 夫 在 北京 俄罗斯 驻 华 大 使 
见 了 校 党 委 书 记 顾 家 山 , 并 接受 了 我 校 出 版 社 赠 子 俄罗斯 大 使 馆 的 十 套 < 力 冈 详 文 全 集 > .俄罗斯 驻 
华 大 使 馅 参赞 梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 七 尔 、 大 使 助理 、 塔 斯 社 记者 ,我 校 校 办 主任 央 歼 明 、 出 版 社 社 
长 张 奇才 ,我 校 杰 出 校友 、 俄 罗斯 人 民 友 这 勋章 和 利 哈 齐 夫 院 士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 


刘 文 飞 教 授 等 参加 了 会 见 。"， 


7. 


add date: '2018- 03— 05， 


会 共 鸭 数 文 件 代 码 展 示 
JS 文件 (utils/common. js) 的 完整 代码 如 下 : 


9 . { 

10. id: '304083 '， 

11. title: ' 我 校 学 子 代 表 国 家 队 获 中 国 羽 毛 球 公开 赛 男 双 亚军 "， 

i poster: ' http://waw. ahnu. edu. cn/_ _ local/7/CC/BD/47349A7168770AC24EB5535B2AF 


35829829 6E24D. png?e = .png', 

13. content: ' 本 网 讯 (体育 学 院 徐 梦 涛 )11 月 11 日 ,世界 羽 联 中 国 羽 毛 球 公 开赛 在 福州 落下 帷 
幕 .在 男子 双打 半 决 赛 中 ,我 校 2018 级 运动 训练 专业 学 生 谭 强 与 搭档 何 济 霆 以 2:0 战胜 印度 尼 西 亚 组 
合 莫 哈 末 。 阿 山 / 享 德 拉 , 普 级 决赛 .决赛 中 ,这 对 年 轻 组 合 以 1:2 负 于 现世 界 排名 第 一 的 印度 尼 西 亚 组 
合 , 获 得 了 本 次 比赛 的 亚军 .这 也 是 齐 强 在 本 年 度 内 获得 的 最 好 成 绩 。"， 


14. add date: '2018—11—14' 

15. 1s 

16. { 

17. id: '305670", 

18. title: ' 我 校 学 子 在 全 省 第 八 届 少数 民族 传统 体育 运动 会 上 吝 获 佳绩 "， 

19. poster: ' http://www. ahnu. edu. cn/  _ local/2/BB/2D/9FEB9B8DOCAS5E059B2C1C7E65BD _ 


67A0410C 3A71F. png?e = .png', 

20. content: ' 本 网 讯 (体育 学 院 分 华 刚 )11 月 18 日 至 23 日 ,由 安徽 省 人 民政 府 主办 ,省 民 委 ,省 

体育 局 和 蚌 塌 市 人 民政 府 陵 办 的 安徽 省 第 八 届 少数 民族 传统 体育 运动 会 在 晨 塌 市 成 功 举行 ,全 省 16 个 

地 市 代表 团 近 1300 名 运动 员 教练 员 、 裁 判 员 参加 了 本 次 运动 会 .\n 本 届 运 动 会 共 设 武术 、 民 族 式 摔跤 、 
EE 螺 和 板鞋 冯 速 等 8 个 项 目 .我 校 组建 了 由 周 芝 雅 . 王 和 章 、 王 强 等 23 名 少 

数 民族 学 生 组 成 的 运动 员 队 伍 , 代 表 无 湖 市 参加 了 高 脚 苋 速 \ 武 术 、 足 球 \ 陀 螺 和 板鞋 苑 速 等 5 个 大 项 的 

比赛 .经 过 激烈 角逐 ,我 校 运动 健儿 共 获 得 4 个 一 等 奖 (第 1 名 )6 个 二 等 奖 ( 第 2 一 4 名 )，9 个 三 等 奖 

(第 5 一 8 名 ) 的 优异 战绩 , 出 色 地 完成 了 比赛 任务 。'"， 

21. add date: '2018 一 11 一 27， 

二 } 

23. | ; 

24 . 

25. // 获 取 新 闻 列 表 

26. function getNewsList() { 

27. let list = |[|]; 

28. for (var 1 = 0; i < news. length; i++) { 


29. let ob]j = {}; 

30. obj. id = news[i]. id; 

31. ob]j. poster = news[i].poster; 

32. obj.add date = news|[i].add date; 

33. ob]j .title = news[i].title; 

34. 1ist. push( ob]j); 

全 } 

36 . return list; // 返 回 新 闻 列 表 
37. } 

38. 


39.// 获 取 新 闻 内 容 
40. function getNewsDetalil(newsID) { 
41. let msg = 1 


42., code: 404 ， // 没 有 对 应 的 新 闻 
43. news: {} 
44. P= 


45. for (var 1 = 0; i< news. length; I++) { 
46. if (newsID == news[i].id) { // 匹 配 新 闻 ID 编号 
47. msg.code = '200'; // 成 功 
48. msg.news = news[i]; // 更 新 当前 新 闻 内 容 


1S 


49. 
50. 


51. 
52. 
二 


54. 


ey 


56 . 
Sh 
58. 
9. 
60. 
61. 


.3 页面 文件 代码 展示 


0 


break; 
|} 

} 

return msg; // 返 回 查找 纺 
} 

. /* 

* 对 外 驱 露 接口 

x / 


module. exports = { 
getNewsList: getNewsL1st， 
getNewsDetail: getNewsDetail 


< block wx:for= '{{[newsList[0],newsList[1],newsList[2]]}}'wx:key= 'swiper{{index}}'> 


< View class = ']ist— item' wx:for = '{{newsList}}' wx:key = 'news{{index}}' wx:for— item = 


首页 代码 展示 

WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 ， 

1。 <I 一 如 O 灯 片 一 -3 

2. <swiper indicator— dots autoplay interval = '5000"' duration = '500'> 

3. 

4. < swiper 一 item > 

5 < image src = '{{item. poster}} '></image > 

6. </swiper — item> 

A </block > 

8. </swiper> 

9. 

10. <!-- 一 新 闻 列 表 -一 > 

11. < VlIew 1d = 'news— list'> 

12. 

'news "> 

13. < image src = '{{news. poster}}'></image > 

14. < text bindtap = 'goToDetail' data ~- id= '{{news. id}}'> 
Of{{news.title}} -- {{news.add date}}</text > 

15. </ View> 

16. </view > 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


DO Np 


> 
La 


JS 文件 (pages/index/index, js) 的 完整 代码 如 下 : 


1, 


/ x* swiper 区 域 样式 * / 
/x*x1 一 1 swiper 组 件 */ 
swiper { 
height: 400rpx; 
| 
/x<*1-2swiper 中 的 图 片 关 / 
swiper image { 
width: 100$%; 
height: 100$%.; 
} 


Var Common = require('../../utils/common. js') 


/7 引用 4 


二 


和 


JS 文件 


2. Pagel{ 

3 data: { 

4. // 约 灯 片 素材 

swiperImg: | 

6. { src: 'http://waw. ahnu. edu. cn/ _ local/A/C7/68/C2C9E5E2161MM66A2D54D21A63C _ 
DD3FEC40 4EBBB. jpg?e= .jpg' }, 

7. { src: 'http://www. ahnu. edu. cn/ _ local/7/CC/BD/47349A7168770AC24EB5535B2AF 
35829829 6E24D. png?e = .png'}, 

8. { src: 'http://www. ahnu. edu., cn/_ _ local/2/BB/2D/9FEB9B8DOCA5E059B2C1C7E65BD _ 
67A0410C 3A71F. png?e = .png'} 

> ] 

10. 上 

11. goToDetail: function(e) { 

12. // 获 取 携 带 的 data- id 数据 

13. let 1d = e.currentTarget. dataset. id; 

14. // 携 市 新 闻 ID 进行 页 面 跳 转 

15. wx. navigateTol( { 

16. url: '../detail/detail?id= "+ id 

17. }) 

18. }, 

19. onLoad: function(options) { 

20. // 获 取 新 闻 列 表 

21. let list = common. getNewsList( ) 

22. // 里 新 列表 数据 

23. this. setData({ newsList: list }) 

24. } 

5 4) 

新 闻 页 代码 展示 

WXML 文件 (pages/detail/ detail. wxml) 的 完整 代码 如 下 : 

1l. <view class = 'container' wx:if = '{{article. id}}'> 

2 <view class = 'title'>{{article. title} }</view > 

E < Vlew class = “ Poster > 

4. < image src = '{{article. poster}}' mode = 'widthFix'></image > 

I </view> 

6 . < View class = 'content'>{{article. content} }</view > 

Ts <view class = 'add date'> 时 间 : {{article.add date} }</view> 

8. < button wx:if = '{{isAdd} }' plain bindtap = 'cancelFavorites> 韶 已 收藏 </button > 
9. < button wx:else plain bindtap = 'addEavorites'> 志 点击 收藏 </button > 

10. </view> 


WXSS 文件 (pages/ detail/ detail. wxss) 的 完整 代码 如 下 : 


IiD 0 相 ob 搬 


> 
二 


11. 
上 二， 


/* 整体 容器 x / 
.COntalner{ 

padding: 15rpx; 

text — align: center:; 
} 
/* 新 闻 标 题 * / 
.titlef{ 

font— size: 14pt.; 

line— height: 80rpx; 
} 
/* 新 闻 图 片 */ 


. poster imagel{ 


有 
14. 
15. 
16. 
17. 
19. 
19. 
20. 
21. 
WA 
23. 
24. 
25. 
20 . 
a 
28. 
29. 
J 
31. 
32. 
区 
34. 


width: 100%.; 
} 
/* 新 闻 正 文 */ 
.Content{ 
text ~ align: left; 
font 一 size: 12pt. 
line — height: 60rpx.; 
} 
/* 新 闻 日 期 */ 
.add datelt 
font 一 size: 12pt; 
text ~ align: right; 
line— height: 30rpx; 
margin— right: 25rpx; 
margin ~— top: 20rpx; 
} 
/x “点击 收藏 "按钮 * / 
buttonf{ 
width: 250rpx; 
height: 100rpx; 
margin: 20rpx auto; 


} 


JS 文件 (pages/detail/ detail. js) 的 完整 代码 如 下 : 


iD 0 


于 


Var common = require('../../utils/common. js') 
Pagel | 
// 添 加 到 收藏 夹 
addFavorites: function(options) { 
let article = this. data.article; 
wx. SetStorageSync(article. ld，article) ; 
this, setData({ isAdd: true }); 
}, 
// 取 消 收 藏 
cancelFavorites: function() { 
let article = this. data.article; 
WX. removeStorageSync(article. id) ; 
this. setData({ isadd: false }); 
}, 
onLoad: function(options) { 
// 获 取 页 面 跳 苇 来 时 携 市 的 数据 
let 1d = options. id 
// 检 查 当 前 新 闻 是 否 在 收藏 夹 中 
Var article = wx. getStorageSync( 1d) 
// 已 存在 
if (article != '') { 
this. setDatal { 
article:article, 
1SAdd: true 
}) 
} 
// 不 存在 
else { 
let result = common. getNewsDetail( id) 
// 获 取 到 新 闻 内 容 
if (result.code == '200') { 


/1 引用 公共 JS 文件 


// 获 取 当 前 新 闻 
// 添 加 到 本 地 缓存 
// 更 新 按钮 显示 


// 获 取 当 前 新 闻 
// 从 本 地 缓存 删除 
// 昌 新 按钮 显示 


< button wx:else open— type = 'getUserInfo' bindgetuserinfo = 'getMyInfo'> 


{{newsList}}" wx:for — item = "news" wx: key = 


< text class = 'news — title' bindtap = 'goToDetail' data ~ id= '{{news. id}}'> 


32. this. setDatal { 

33. article: result. news, 

34. isAdd: false 

39. }) 

36. } 

37. } 

38. } 

39. 月) 

个 人 中 心 页 代码 展示 

WXML 文件 (pages/my/my. wxml) 的 完整 代码 如 下 ， 
1. <!-- 一 登录 面板 -一 > 

2. <Vlew 1d= 'myLogin'> 

3. < block wx:if = '{{isLogin}}'> 

4. < image id= 'myIcon' src = '{{src}}'></image> 
3 < text id= 'nickName'>{ {nickName} }</text > 
6. </block > 

了 

8. 未 登录 ,点 此 登录 

9. </button > 

10. </view> 

11. <!-- 我 的 收藏 ~-> 

12. <view id= 'myFavorites'> 

13. < text > 我 的 收藏 ({ {num}})</text > 

14. <! 一 一 收藏 的 新 闻 列 表 -- > 

15. <vliew id= 'news— list'> 

16. < vlew Class = 1st 一 item' wx: for = 
"{{news. i1d}} > 

17. < image src = '{{news. poster}}'></image> 
18. 

19. ON{{news.title}} -- {{news.add date})} 
20. </text > 

21. </view> 

22. </view> 

23. </view> 


WXSS 文件 (pages/my/my. wxss) 的 完整 代码 如 下 : 


DOODNpc 


卢 。 搬 
| 


/* 登录 面板 * / 
# myLogin{ 
background — color: # 328EEB; 
height: 400rpx; 
display: flex; 
flex— direction: column; 
align ~ items: center; 
justify— content: space ~ around; 


} 


. /x*1 一 1 头像 图 片 */ 


#mvyIcont{ 
width: 200rpx; 
height: 200rpx; 
border — radius: 50%.; 
} 


. /* 1 一 2 微 信 昵称 x / 


# nickNamet{ 


.} 


color: white; 


. /< 我 的 收藏 / 


. #myFavoritest{ 


.} 


padding: 20rpx; 


JS 文件 (pages/my/my.js) 的 完整 代码 如 下 : 


1 
2 
3 
4. 
5. 
6 
了 
8 
9 


}, 


// 获 取 微 信用 户 信息 
getMyInfo: function(e) { 


10. 
11. 
12. 
用 
14. 


15; 
16. 
17. 


18. 
19， 
20. 
21. 
22. 
2 
24. 
5 
20. 
27. 
28. 
29 . 
30. 
31 


32， 
33. 


}, 


34. 
35. 
36. 
37， 
38. 
39. 


40. 


} 


let info = ee. detail. userIinfo; 
this. setDatal { 
isLogin: true, 
src: lnfo. avatarUr], 
nickName: info. nickName 
}) 
// 获 取 收 藏 列表 
this. getMyFavorites( ) ; 


}, 
/7 获取 收藏 列表 


getMyFavorites: function() { 


let info = wx. getStoragelInfoSync( ) | 
let keys = info. keys; 
let num = keys. length; 


let mvyList = []; 
for (var i = 0; i<num; i++) { 
let obj = wx.getStorageSync(keys[i|); 
myList. push( obj); 
} 
// 更 新 收藏 列表 
this. setDatal { 
newsList: myList, 
num: num 


1 


goToDetail: function(e) { 


// 获 取 携 带 的 data- id 数据 
let id = e.currentTarget. dataset. 1d; 
// 携 带 新 闻 ID 进行 页 面 跳 转 
wx. navigateTo( { 

url: '../detail/detail?id=' + jd 
}) 


/ x 


* 生命 周期 国 数 -一 监听 页 面 显 示 
x*x/ 
onShow: function() { 


// 如 果 已 经 登录 
if(this. data. isLogin){ 
// 更 新 收藏 列表 


// 确 认 登 录 状 态 
// 更 新 图 片 来 源 
// 蝎 新 昵称 


// 读 取 本 地 过 存 信息 
// 获 取 全 部 key 信息 
// 获 取 收 藏 新 闻 数 量 


// 将 新 闻 添 加 到 数组 中 


48. this. getMyFavorites( ) 


通过 基于 模拟 数据 的 高 校 新 闻 网 项 目的 开发 练习 ,主要 综合 复习 了 以 下 知识 点 和 操作 : 
(1) 小 程序 项 目的 创建 步骤 。 

(2) 手动 新 建 小 程序 应 用 文件 和 页 面 文件 的 步骤 。 

(3) 导航 栏 的 标题 . 育 晕 颜色 和 文字 颜色 的 设置 方法 。 

(4) tabBar 的 创建 方法 。 

(5) 页 面 布 局 和 样式 设计 的 基本 方法 。 

(6) 使 用 双 花 括号 {4})} 生 成 动态 数据 的 方法 。 

(7) 使 用 setData 重 置 动态 数据 的 方法 。 

(8) wx:for、wx:if 和 wx:else 属性 的 用 法 。 

(9) 公共 函数 的 创建 ,导出 和 调用 方法 。 

(10) 本 地 缓存 数据 的 读 取 和 删除 。 

(11) 使 用 按钮 的 open-type 属性 读 取 微 信 个 人 信息 的 方法 。 
(12) 页 面 导 航 跳 转 和 数据 携 市 的 用 法 。 

(13) 项 目 预览 和 真 机 调试 的 步骤 。 


小 程序 全 栈 开 友基 于 WAMP 
的 局 校 新 闻 网 


小 程序 前 端 项 目 对 接 上 后 端 服 务 需 .数据库 和 存储 可 以 称 为 小 程序 的 全 栈 开 发 。 本 章 将 
以 WAMP(CWindows 十 Apache 十 MySQL 十 PHP) 组 合 为 例 从 去 开始 详解 如 何 部 署 服 务 需 、 搭 
人 基于 前 面 第 15 章 的 高 校 新 闻 网 小 程序 项 目 进 行 全 栈 开 发 改造 。 


。 综合 应 用 所 学 知识 创建 完整 的 新 闻 小 程序 项 目 ; 
。 熟练 学 握 服务 器 部 署 、 数据库 搭建 和 接口 的 实现 。 


16.1.1 现 有 项 目 导 人 


本 项 目 是 基于 第 15 章 newsDemo 项 目的 改造 ,因此 无 须 新 建 空 月 项 目 , 直 * Fx 
接 复 制 第 15 章 项 目 文件 夹 到 新 的 路 径 并 且 重 命名 为 newsDemo WAMP (该 名 人 -这 于 
称 由 开发 者 自 定义 ) 即 可 导入 微 信 web 开发 者 工具 中 进行 后 续 的 开发 。 

注意 导 人 时 修改 一 下 项 目 名 称 , 因 为 开发 者 工具 中 不 允许 有 同名 项 目 存在 。 

效果 如 图 16-1 所 示 。 

单 击 “导入 ”按钮 完成 项 目 导 入 , 即 可 进行 后 续 的 改造 工作 了 。 


16.1.2 后 靖 迪 辑 实 现 


后 端 逻 辑 实现 包含 服务 器 部 署 ,数据库 搭 建 以 及 接口 的 实现 ,本 章 以 Windows 十 Apache 十 
MySQL 十 PHP( 简 称 为 WAMP) 服 务 器 环境 为 例 进行 示范 。 小 程序 对 于 接口 制作 所 使 用 的 数 
据 库 、 后 端 语言 和 框架 均 没 有 固定 要 求 , 这 里 仅 是 其 中 一 种 示例 ,开发 者 完全 可 以 根据 自己 所 
擅长 的 领域 月 由 选择 。 

号 本 


视频 讲解 


和 部 署 工作 。 
请 根据 “附录 B 可 视 化 数据 库 搭 建 " 中 的 内 容 进 行 数 据 库 和 视频 讲解 视频 讲解 


项 目 名 称 newsDemo_\WAMP| 


目录 EWwxdemo_workspaceinewsDemo WAMP 


ApplID wx19079110a0i01e8a 


著 无 ApplD 可 注册 
或 使 用 测试 号 


图 16-1 小 程序 项 目 填 写 效 果 示 意图 
数据 表 的 搭建 工作 。 
例如 创建 一 个 名 称 为 news 的 数据 库 ,并 在 其 中 创建 名 称 为 campus_news 的 数据 表 。 
campus_news 表 的 结构 参考 表 16-1 。 
表 16-1 campus_news 表 结 构 
字段 名 称 字段 类 型 字段 长 度 主 键 
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content 新 闻 内 容 


其 中 字段 名 称 .类 型 .长度 等 均 可 以 由 开发 者 按照 实际 情况 进行 目 定 义 。 
然后 根据 实际 情况 录入 奎 干 条 新 闻 数 据 , 如 图 16-2 所 示 。 
接口 的 实现 
请 根据 “附录 C 后 端 框架 搭建 ”学 习 框 架 部 署 、 服 务 器 对 接 以 及 接口 制作 。 
首先 自 定义 函数 getNewsList 和 getrNewsByld, 分 别 用 于 获取 新 闻 列 表 
和 根据 ID 编号 获取 指定 的 新 闻 内 容 : 
<?php 


namespace Home\Controller.; 
use Think\Controller:; 


昆 
否 
否 
否 
否 


class IndexController extends Controller 
{ 
public function getNewsList(){ } 1/ 获取 新 闻 列 表 


了 OUNDNPP 


文件 六 加 查看 窗口 帮助 

本 导入 内 导 本 导出 内 导 入选 向 导 | 国 ] 网 格 查 看 世 | 表单 查看 | 门 备注 国 十 六 进 制 加 图 像 | 名 2 升序 排序 

title poster content add date 
eee “名 家 进 高 校 ” 专 场 文 艺 演出 首 站 走 进 千 http:/f/www.ahnu.edu.cn/u 本 网 讯 (大学生 记 者 团 骨 2018-06-14 
288276 省 文联 匡 化 各 可 过 局 术 ， en http://www.ahnu.edu.cn/u 本 网 讯 ( 姜 林 学 院 干 伟 】 2018-06-14 
国语 学 院 者 定 中 国 英语 能 力 等 http://www.ahnu.edu.cn/y 本 网 讯 近日 艺 校 外 国语 当 2018-06-14 
288399 学 榨 深 入 学 习 叶 彻 习近平 总 书记 在 北京 大 学 扣 http:/fwww.ahnu.edu.cn/u 本 网 讯 (组织 部 摩 仲 明 ) 2018-06-14 
288431 学 校 专题 部 等 毕业 生 文 明 高 校 工作 http://www.ahnu,edu.cn/u 本 网 讯 【学 牛 处 干 亚 男 让 2018-06-15 
288499 我 校 骨干 教师 第 四 期 卦 健 培 训 国 举行 行 前 培训 http://www.ahnu.edu.cn/u 本 网 讯 { 国际 交流 合作 & 2018-06-15 
288505 【 情 对 母校 ] 郭 锐 评 、 陈 礼 勤 : 洒 洋 过 海 尽 “http://www.ahnu,edu.cn/u 正 值 安徽 师范 大 学 90 华 证 2018-06-15 
288530 安徽 师范 大 学 与 安 向 省 高 分 卫星 数据 应 用 中 心 http://kyc.ahnu.edu.cn/up 本 网 讯 ( 科研 处 王 静 】 6} 2018-06-15 
288550 学 校 尝 行 安徽 师范 大 学 首届 民族 文化 节 http://www.ahnu,edu.cnju 本 网 讯 (学 工 处 学 牛 助理 2018-06-15 
288553 “ 立 化 名 家 进 高 校 ” 活 动 走 进 安徽 师范 大 学 w http://www.ahnu.edu.cn/u 本 网 讯 ( 区 学 院 黎 晓 沽 言 2018-06-15 
288856 安徽 央 窟 大 池 后 2 从 : 从 “汗水 ”走向 “ 乱 httpVJ/www.ahnuedu.cnu “我 们 诊室 的 点 子 坏 了 ，:; 2018-06-20 
加 国际 乒 联 朝鲜 公司 httpV/www.ahnu.edu.cn/u 本 网 讯 ( 体育 学 院 新 闻 中 2018-06-20 


客座 教授 本 任 蔷 雷 忠平 奖 助 学 人 金 签 估 http://fwww.ahnu.edu.cn/u 本 网 讯 【 地 旅 学 院 王 美 〗 2018-06-21 
289154 我 术 学 子 在 省 大 学 生 " 创 青春 ”创业 大 赛 中 喜 http://www.ahnu,edu.cn/u 青 通 社 讯 ( 汪 凯 甘 伟 ) 近 2018-06-22 
289240 第 二 届 语 言 教学 与 研究 国际 学 术 研 讨 会 在 我 长 http://wxy.ahnu.edu.cn/uF 本 网 讯 ( 文学 院 ) 匮 营 吹 ! 2018-06-25 
289337 我 枝 首 居 教 职工 气 排球 比赛 顺利 举行 http://www.ahnu.edu.cn/u 本 网 讯 ( 文 / 校 工会 李 平 | 2018-06-25 
289511 【青春 毕业 季 ]】 安徽 师范 大 学 隆重 举行 2018 http://www.ahnu.edu,cn/u 本 网 讯 ( 校 大 学 生 记 者 团 2018-06-27 
301986 【运动 员 专访 ]】 跑 通 上 的 梦想 : 记 甬 村 首 运 会 http://www.ahnu.edu.cn/u 本 网 讯 ( 外 国语 学 院 引 2018-10-29 
302308 我 校 在 全 国 首 届 “图 书馆 杯 主 题 海 报 创 意 设 计 http://www.ahnu.edu.cn/u 本 网 讯 ( 图书 饮 ) 近 日 ,由 2018-10-31 


Ho 犁 有 策 1 
第 1 条 记录 ( 共 19 从) 于 1 页 


16-2 ”campus_news 表 录 入 数据 参考 图 


8. public function getNewsById( ){ } // 根 据 ID 编号 获取 新 闻 内 容 


获取 新 闻 列 表 的 接口 的 详细 代码 如 下 : 


1. public function getNewsList( ) 

2 { 

3. Sp = 0 ， // 获 取 当 前 页 数 

4. $ page = ($pl='') ? intval($p) : 1;  // 当 前 页 数 取 整 

5. $rows = 5， // 每 次 获取 的 新 闻 数 量 

6. 

Ts $ offset = ($ page— 1) * $ rows; // 计 算 从 第 几 条 数据 开始 获取 

8. $sm= M(); // 创 建 查询 模型 

9. $ count = 5$m 一 > query('select count( Id) n from campus news'); // 查 询 新闻 总 数 
10, $srs = $m-> query('select id,title,add date, poster from campus news limit '. $ offset.','. 
$ rows); // 查 询 新 闻 列 表 数 据 

11. $s msg[ 'total'] = $ count[0]['n']; // 获 取 新 闻 总 数 

和 $ msg['list'] = $ rs; // 获 取 当 前 页 的 新 闻 列 表 数 据 

13. 

14. echo json encodel(l $ msg); // 发 送 JSON 数据 

15. } 


根据 ID 编号 获取 指定 新 闻 内 容 的 接口 的 详细 代码 如 下 . 


1 ， public function getNewsBVId( ) 
2 { 
3 $id = I('id'); // 获 取 新 闻 DD 编写 


4. sm= M():; // 创 建 查 询 模 型 
$rS = $m->query('select x from campus news where ld= "'. $ id); // 查 询 新 闻 内 容 
6 echo json encode( $ rs); // 发 送 JSON 数据 
7 } 
此 时 接口 就 制作 完成 了 ,开发 者 可 以 先 使 用 浏览 器 进行 访问 以 检测 数据 是 否 获 得 。 
加 二 
16.1.3 公共 逻辑 a 
在 公共 JS 文 件 (utils/common. js) 中 删除 原先 的 所 有 代码 ,并 进行 服务 汪汪 
器 接口 的 地 址 配置 。 pm 
代码 片段 如 下 : 视频 讲解 
/7 服务 硕 域名 地 址 
Var baseUrl = 'http: //127.0.0.1/myNews/' 
// 获 取 新 闻 列 表 接 口 


Var getNewsList = baseUr]l + 'Index/getNewsList' 


// 根 据 新 闻 ID 获取 新 闻 内 容 接口 
var getNewsBVyId = baseUrl + 'Index/getNewsBVId' 

注意 ,这 里 的 127.0.0. 1 是 以 本 机 模拟 服务 器 效果 为 例 , 开 发 者 如 果 有 条 件 搭建 自己 的 服 
务 需 ,可 以 将 此 处 替换 成 实际 服务 器 的 IP 地 址 或 域名 地 址 。 

接 下 来 继续 在 common. js 中 涤 加 上 月 定义 因数 goToDetail, 用 于 打开 新 闻 正 文 页 面 ,并 携 
带 新 闻 ID 编号 ,代码 片段 如 下 : 


3 


* 日 定义 函数 一- 跳 转 新 闻 浏 览 页 面 
省 


function goToDetail(id) { 
wx. navigateTo( { 
url: '../detail/detail?id= ' + id, 
}) 
} 


最 后 需要 在 common. js 中 使 用 module. exports 语句 暴露 变量 与 图 数 出 口 , 代 码 片 段 
如 下 : 


C0 呵 GO 相 Cu le 搬 


1. module. exports = { 

到 getNewsList: getNewsList, 

3 getNewsBylId: getNewsBVYId， 

4 goToDetail: goToDetail 

5. 1} 

现在 就 完成 了 公共 逻辑 处 理 的 部 分 。 

然后 需要 在 各 页 面 的 JS 文件 顶端 引用 公共 JS 文件 ,引用 代码 如 下 : 


Var common = require('../../utils/common. js') /1 引用 公共 JS 文件 


需要 注意 小 程序 在 这 里 暂时 还 不 文 持 绝对 路 径 引 用 ,只 能 使 用 相对 路 径 。 


16.2.1 新 闻 列 表 展 示 


首先 在 页 面 底部 添加 一 个 "加载 更 多 ”按钮 ,以 备 后 续 使 用 。 
修改 后 的 WXML 文件 (pages/index/index. wxml) 代 人 码 上 族 段 如 下 : 


1. <!-- 新 闻 列 表 -一 > 


2. <Vlew 1d= news 一 1Ss 七 > 


3. <view class = 'list ~ Item' wx:for = "{{newsList}} wx:for— item= "news wx:key = ({{news， 
id}} > 

4 < image src = '{{news. poster}} '></image > 

3 < text ><{{news.title}}— {{news.add date} }</text > 

6 </view> 

7. < button plain loading = "{{loading}}"> 

8 {{loadMoreText }} 

9 </button > 

10. </view> 


然后 在 JS 文件 的 data 中 添加 按钮 的 状态 和 文学 描述 。 
有 关 JS 文件 (pages/index/index. js) 代 码 片 段 如 下 : 


1. Page({ 

2. / x 

3. * 页面 的 初始 数据 

4 . 关 1 

5. data: { 

6. loading: false, 

7. loadMoreText: ' 加 载 更 多 ' 
Ss }, 

9. |}) 


在 JS 文件 顶端 定义 公共 变量 isEnd 和 currentPage, 分 别 用 于 表示 新 闻 是 否 全 部 加 载 和 
当前 处 于 第 几 页 ,有关 JS 文件 (pages/index/index. js) 代 码 片 段 如 下 : 


1. Var isEnd = false 
2. Var currentPage = 1 
3. Pagell 

4. 过 

5. })) 


创建 自 定义 函数 getNewsListByPage 用 于 向 服务 器 发 送 请 求 ,获取 新 闻 总 数 和 指定 页 数 


上 的 新 闻 列 表 ,并 使 用 setData 图 数 泻 染 到 页 面 上 。 


有 关 JS 文件 (pages/index/index. js) 代 码 片 段 如 下 : 


1. Pagel({ 

2 / xx 

3. * 月 定义 函数 一 -获取 指定 页 数 的 新 闻 列 表 
4. x*x/ 

5 getNewsListByPage: function(page) { 

6 Var that = this 

7 Wx. request( { 


8. url: common. getNewsList, 


9 . data: { 

10. page: page 

11. 上 

12. success: function(res) { 

13. // 获 取 新 闻 总 数 

14. let total = res. data. total 
15. // 追 加 更 多 新 闻 数 据 

16. let list = that. data. newsList. concat(res. data. list) 
17. // 蝎 新 新 闻 数 据 和 新 闻 总 数 
18. that. setDatal { 

19. newsList: list, 

20. total: total 

21. }) 

22. // 如 果 已 经 显示 全 部 新 闻 
23. if (list. Jength == total) { 
24. 1SEnd = true 

-As that. setDatal { 

26. JoadMoreText: ' 已 无 更 多 ， 
27. }) 

28. } else { 

29. // 翻 到 下 一 页 

30. currentPaget+ 

31. } 

32. } 

3 }) 

34. } ， 
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在 onLoad 了 刹 数 中 调用 getNewsListByPage 获取 第 一 页 新 闻 数 据 。 
有 关 JS 文件 (pages/index/index. js) 代 码 片 段 如 下 : 


1. Page({ 

2. /xx 

3. x 和牛 命 周 期 函数 -一 监听 页 面 加 载 

4. x/ 

3 onLoad: function(options) { 

6. this. getNewsListByPage(1) // 获 取 第 一 页 新 闻 数 据 
Ts hy 

8. 小) 


修改 幻灯 片 滚 动 区 域 的 循环 数组 ,将 其 更 新 为 新 闻 列 表 中 的 前 3 条 记录 。 
有 关 WXML 文件 (pages/index/index. wxml) 代 人 三 片段 修改 如 下 : 


1 = 请 一 >》 

2. < swiper indicator ~— dots autoplay interval = '5000' duration= '500'> 

3 < block wx:for= '{{[newsList[0],newsList[1],newsList[2]]}}'wx:key= 'swiper{ {index}}'> 
4 < SW1iper 一 ltem > 

二 < image src = '{{item. poster} } '></image > 

6 </swiper 一 item> 

7 </block > 

8. </swiper> 


此 时 页 面 效 果 如 图 16-3 所 示 。 


可 。- 文 k 和 家 进 局 访 ” 专 场 文艺 演出 首 站 走 进 
大 学 一 2018-06-14 
| 感 性 


中 6 省 文联 “文化 名 这 进 高 校 ”活动 走 进 安 散 陋 
范 庆 字 匡 术 字 院 一 2018-06-14 


so 我 校外 国语 字 院 教师 参与 制定 中 国 莫 请 能 力 
等 级 量 宕 工作 受到 搜 育 部 考试 中 心 致谢 一 一 
十 - 记 文 联 “文化 名 京 进 高 校 ”活动 走 进 安 租 师 i 


Ew 一 学校 深入 学 习 有 入 栅 习 近 平 总 书记 在 北京 大 字 
范 六 字 匡 趟 字 阮 一 一 2018-06-14 
| 硬 生 座谈 会 上 的 重要 讲 证 棕 裕 一 一 2018-06- 


+* 才 校外 国语 学 际 教师 参与 制定 中 国 英语 能 力 EE 

等 痕 芋 农工 作 受 天 教育 部 考试 中 心 庚 揣 一 一 9 学 以 专题 部 署 毕业 生 广 明 商 校 工作 一 一 
2018-06-14 2018-06-15 

一 + 学 校 深 入 学 习 册 崩 习 近 平 总 书记 在 北京 大 学 


和 应 谈 会 上 的 各 要 潮 活 精神 一 2018-06- 
|14 
4 
四 页 看 全 失守 坟 (b) 页 面 底部 效果 
图 16-3 首页 新 闻 列 表 展 示 


16.2.2 ”加载 更 多 新 闻 


为 首页 新 闻 列 表 底 部 的 “加 载 更 多 ”按钮 妃 加 bindtap 属性 绑 定 点 击 事件 。 
有 关 WXML 文件 (pages/index/index. wxml) 代 码 片 段 修改 如 下 ， 


1. <! 一 新 闻 列 表 一 -> 


2. <Vlew 1d= 'news— list'> 


3. <Vliew class= ']ist— item'wx:for="{{newsList}} wx:for— item= "news wx:key = "1{{news. 
id}}"> 

4 < image src = '{{news. poster} } '></image > 

5 < text >O{{news.title}} -=- {{news.add date}}</text > 

6. </view> 

7 < button plain loading = “{{loading}} bindtap = LoadMore > 

8 {{loadMoreText}} 

9 </button > 


10. </view> 


在 JS 文件 中 创建 loadMore 也 数 用 于 加 载 当 前 页 面 新 闻 , 当 用 户 点 击 时 尝试 癌 服 务 器 要 
求 获 取 下 一 页 新 闻 列 表 数 据 , 当 没有 更 多 数据 时 显示 “已 无 更 多 ”字样 ,并 禁止 点 击 。 
有 关 JS 文件 (pages/index/index.]s) 代 码 片 段 如 下 : 


1. Page({ 
2. / ¥x 
3. x* 有 目 定 义 清 数 -- 加 载 更 多 新 闻 
4. x/ 


和 loadMore: function() 1 

6 // 如 条 新 闻 疝 未 全 部 加 载 完毕 ,并 且 按 钮 不 处 于 正在 加 载 状态 
7. if (!isEnd && !this. data. loading) 1 

8 // 让 按钮 出 现 加 载 动 画 

9 this. SetData( { 

J 0， loading: true 

11. }) 

12. setTimeout(() =>{ 

13. // 加 载 当 前 页 面 新 闻 数 据 

14. this. getNewsListByPage(currentPage) 
15. // 停 止 按钮 加 载 动画 

16. this. setDatal { 

17 loading: false 

18. }) 

19. }, 1000) 

20. } 

21. } 

22. }) 


- 短 是 。 首 文 联 “ 立 化 名 家 进 高 过” 活动 击 进 安 蒂 全 
更 去 学 莹 下 字 院 一 一 .201 由 -6-14 


Pe s 
| ori “ 立 化 笠 祝 进 悍 以 ”专场 立 艺 演 出 首 站 走 进 


HB 安 荐 量 范 大 学 一 2018-06-14 


"和 马 令 什 国 融 字 耽误 珊 过 与 秽 定 中 国 枫 三 能 力 
等 如 量 过 工作 午 到 旷 商 朗 考 试 申 心 殖 谢 一 一 
2018-06.14 


fT + 学校 深入 学 习 骨 棚 习 近 平 总 书记 在 北京 大 学 
: 和 应 开会 上 8 二 委 济 十 档 社 2018_06- 
14 
* 学 校 专题 部 加 毕业 生 文明 商 收工 作 一 一 
2018-06-.15 


。 我 榨 骨 干 才 俩 第 四 期 走狗 堵 训 国 举行 行 前 寺 
训 | 天 担 肉 礼 一 一 2018-06-15 
国 -【 情 系 母 法 ]】 圣 锐 评 ， 际 礼 硕 : 淋 洋 过 油 
压 师 ” 管 一 一 2018-06-15 


学 与 者 朋 首 高 分 卫 昌 有数 需 岂 用 中 
| 旋 硕 目 人 台 必 协议 厄 利 符 串 一 一 2018-06-15 


学校 举 行 安 答 师 下 大 学 首届 民 旅 文化 于 一 
0 2018-05.15 
[| 


活动 主 进 安 各 条 芝 大 学 
ee 一 2014-06-15 


+ 第 二 居 请 言 执 学 与 研究 国际 学 六 研讨 会 在 开 
校 成 功 汪 办 一 .0018-06- 25 


。 我 校 首届 者 职 荆 气 津 汶 比 要 是 利 举行 一 
2018-06-.25 


| 。【[ 言 春生 业 季 ] 安 秃 阿 苍 大 学 诬 里 举行 2018 
届 委 业 尾 礼 一 一 2018-06-27 


[过 动员 专访 ] 起 过 上 的 梦 起 : 记 表 村 过 
= 一 | 全 个 陆 的 方 打 得 一 一 2018-10D-29 


* 验 习 在 全 国 首 居 “ 图 书馆 件 主题 海松 创 雇 询 
计 夫 要” 申 杜 奖 一 一 .18-]0-3 
| 


全 
(a) 页 面 初 始 底部 效 末 (b) 百 次 加 载 后 底部 效 末 (c) 全 部 加 载 完 毕 后 的 部 效 末 


图 16-4 首页 新 闻 列 表 加 载 效果 展示 


点 击 跳 转 新 闻 内 容 


在 对 应 的 detail. js 文件 中 修改 goToDetail 函数 的 内 容 ,代码 片 段 如 下 : 


10.2.3 


视频 讲解 


1. Page({ 
2 / x 
3. x* 自 定 义 函 数 -- 跳 转 新 闻 浏 览 页 面 
4. x/ 


5 
6 
Fe 
8 
9 


新 闻 页 的 改造 主要 集中 在 如 何 获取 新 闻 正文 内 容 , 在 首页 逻辑 中 已 经 实 
现 了 页 面 跳 转 并 携带 了 新 闻 ID 编号 ,现在 需要 在 新 闻 页 面 接收 ID 编号 ,并 查 


询 对 应 的 新 闻 内 容 。 
有 关 JS 文件 (pages/detail/ detail. js) 代 人 码 睛 段 修 改 如 下 : 
1. Page({ 
， / ¥% 
3. * 生命 周期 函数 一- 监听 页 面 加 载 
4. *x/ 
3 onLoad: function(options) { 
6. // 获 取 携 带 的 新 闻 ID 编号 
1 let 1d = options. 1d 
8. // 检 查 当 前 新 闻 是 否 在 收藏 夹 中 
9. Var article = wx. getStorageSync( 1d) 
10. // 已 存在 
11. if (article != ') { 
12. this. setDatal { 
13. i1sAdd: true, 
14. article: article 
15. }) 
16. } 
17. // 不 存在 
18. else { 
19. this. setData( { isAdd: false }) 
20. var that = this 
有 // 回 服务 器 发 出 请 求 获取 新 闻 
22. wx. request ({ 
23. url: common. getNewsById, 
24. data: { 
25. id: 1d 
26. }, 
27. success: function(res) { 
28. that. setData({ article: res. data[0] }) 
29. } 
30. }) 
31. } 
32. 要 
33. 月 ) 


}) 


此 时 已 经 可 以 扣 击 跳 转 到 detail 页 面 , 并 且 成 功 携 市 了 新 闻 ID 数据 ,但 是 仍 需 在 detail 
页 面 进行 携 市 数据 的 接收 处 理 才 可 显示 正确 的 新 闻 内 容 。 


goToDetail: function(e) { 
let id = e.currentTarget. dataset. id 
common. goToDetail(id) 


}, 


视频 讲解 


此 时 重新 从 首页 点 击 新闻 跳 转 就 可 以 发 现 已 经 能 够 正确 显示 标题 对 应 的 新 闻 内 和 容 了 。 


运行 效果 如 图 16-5 所 示 。 
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a “神化 名 过 进 高 梳 ” 寺 场 立 艺 演 出 首 站 走 进 
安 租 珊 范文 学 一 一 2018-06-14 


蔚 “二 而 
| 全 本 生生 是 


| - 首 文联 “文化 名 家 进 高 校 ” 活 动 走 进 安徽 师 


各 广 字 美 不 字 院 “2018-06-14 


=== + 因 校 外 国 浊 学 阮 教 师 参 与 制定 中 国美 请 训 力 
等 级 量 表 工 作 受 到 教育 部 考试 中 心 到 谢 一 一 
属 2018-06-1#4 


ni Ee # 学 桩 深入 学 习 角 栅 习 近 平 总 书记 在 北京 大 学 
| 

站 十 生 座 谈 会 上 的 重要 讲话 糖 础 一 一 2018-06- 
, : 本 14 


各 多 
(a) 首页 新 闻 列表 


对 网 讯 (大 学生 记者 团 肖 梦 茹 任 曼 玉 党 委 宣 传 部 
宫 获 平 / 文 拖 蝇 /图 ) 浇 后 若 营 ， 江 淮 汤 汤 。6 月 13 
日 ， 由 省 和 宣传 部 、 省 委 教 育 工 委 主 办 ， 省 文联 、 
安徽 演艺 集团 等 单位 联合 开展 的 “文化 名 地 进 高 
校 ” 系 列 活动 首 站 走 进 安徽 师范 大 学 。 下 午 4 

， “传承 与 梦想 ”安徽 师范 大 学 专场 文艺 演出 在 
花 津 校区 大 礼堂 拉 开 序幕 。 省 委 常 委 、 宣 传 部 长 卡 
爱 坐 ， 省 委 宣 传 部 副 部 长 洪 永 平 ， 省 委 教 育 工 委 副 
书记 王 佩 刚 ,省 文联 党 组 书记 、 副 主席 、 书 记 处 第 


(b) 点 击 浏览 新 闻 


图 16-5 在 首页 新 闻 列 表 中 浏览 新 闻 的 效果 


个 人 中 心 页 的 改造 主要 集中 在 如 何 浏览 已 收藏 的 新 闻 , 与 首页 的 点 击 跳 er 
转 新 闻 内 容 功 能 类 似 , 在 对 应 的 my. js 文件 中 修改 goToDetail 函数 的 内 容 ， 视频 讲解 
代码 片段 如 下 : 


1. Pagel({ 

2 / xx 

3. * 目 定 义 卫 数 --- 跳 转 新 闻 浏 览 页 面 

4. 关 / 

3 goToDetail: function(e) { 

6. let 1d = e.currentTarget. dataset. 1d 
Vs common. goToDetail( id) 

上 } ， 

-2 


最 终 运 行 效 果 如 图 16-6 所 示 。 

此 时 小 程序 全 栈 开 发 的 高 校 新 闻 网 项 目 就 正式 改造 完毕 ,开发 者 也 可 以 根据 月 己 所 擅 
长 的 技术 方 品 重新 选择 其 他 服务 兹 或 后 端 开发 语言 ,例如 Java、Node. js 等 均 可 实现 该 
项 目 。 


和 WeChars= 3 和 =- gg a 币 籽 年 和 而 al = 


“文化 名 家 进 高 校 ” 专 场 文艺 演出 首 站 走 进 
安徽 师 沁 大 学 


周 小 贝 全 


我 的 收藏 (2) 
EE ,pl e“ 立 化 各 家 进 宇 棱 ” 寺 场 文艺 演出 首 站 
1 WW 走 进去 徽 师 更 大 字 一 一 2013-06-14 
六 寺 
人 本 网 讯 ( 大 学 生 记 者 团 肖 梦 匣 任 县 玉 党 委 宣 传 部 
油 师 范文 学 美术 学 院 一 一 2018-06-1 生 宣 歼 平 / 文 制 强 /图 ) 潜 岳 苍苍 ,江淮 汤 汤 ，6 月 13 
日 ， 由 省 委 宣 传 部 、 省 委 教 育 工 委 主 办 ， 省 文联 、 
安徽 演艺 集团 等 单位 联合 开展 的 “文化 名 这 进 高 
校 ” 系列 活动 首 站 走 进 安徽 师范 大 学 。 下 午 4 
点 ，“ 传 承 与 梦想 ”安徽 师范 大 学 专场 文艺 演出 在 
花 津 校区 大 礼堂 拉 开 序 莫 。 省 委 常 委 、 宣 传 部 长 店 
爱 华 ， 省 委 宣 传 部 副 部 长 洪 永 平 ， 省 委 教 育 工 委 副 
书记 王 佩 刚 ， 省 文联 党 组 书记 、 到 主席 、 书 记 处 第 


(a) 我 的 收藏 列表 (b) 浏览 收藏 的 新 闻 
图 16-6 浏览 已 收藏 新 闻 的 效果 


SNSNSERERA 
16.5.1 应 用 文件 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


1 1 

2, “pages : [ 

3. "pages/ index/ index", 

4. "pages/my/my", 

- "pages/detail/detail" 

6. 1 

i 

8. "navigationBarBackgroundColor" : " # 328EEB", 
9. "navigationBarTitleText": "我 的 新 闻 网 " 

10. ls 

11. “七 abBar : | 

12. "color”":“" 间 000"”, 

13， "selectedColor": " # 328EEB", 

14. "list”:| 

15. { 

16. "pagePath" : "pages/index/ index", 

17. "text": "首页 "， 

18. "iconPath" : "images/index. png", 

19. "selectedIconPath": "images/index blue. png" 


ko 
人 
一 -一 
™ 


10. 


ea "pagePath": "pages/my/my", 
we "text" : "我 的 "， 

24. " iconPath" : "images/my. png", 
29. "selectedIconPath" : "images/my_blue. png" 
26. } 

27. ] 

28. } 

29. } 

app. wxss 文件 的 完整 代码 如 下 : 

1. /x* 新 闻 列 表 区 域 样式 */ 

2. /x*2--1 新闻 列表 容 兹 x*/ 

3. #news— listt{ 

4. min— height: 600rpx; 

5 padding: 15rpx; 

6. |} 

了 

8. /7/x*2-2 单 行列 表 项 目 */ 

9. .list— Item{ 

10. display: flex; 

11. flex— direction: row; 

12. border — bottom: lrpx solid gray; 
13. } 

14. 

15. /x*2-3 新 闻 图 片 */ 

16. .list— item imaqef 

17. width: 230rpx; 

18. height: 150rpx; 

19. margin: 10rpx; 

20. |} 

1. 

22. /x*2-4 新 闻 标 题 */ 

23. .1ist 一 item text1{ 

24. width: 100S. 

25 line— height: 60rpx; 

20 . font — size: 10pt; 

27. } 


5.2 公共 因数 文件 代码 展示 

JS 文件 (utils/common. js) 的 完整 代码 如 下 : 

1. // 服 务 右 域名 地 址 

2. Var baseUrl = 'http: //127.0.0.1/myNews/' 
有 员 

4. // 绪 取 新 闻 列 表 接 口 

5. Var getNewsList = baseUrl + 'Index/getNewsList' 
6 . 

7. // 根 据 新 闻 ID 获取 新 闻 内 容 接口 

8. var getNewsBvyId = baseUrl + 'Index/getNewsBVyId' 
9 . 

10. / xx 


11. * 日 定义 函数 -- 跳 转 新 闻 浏 贤 页 面 


10 


12. */ 
13. function goToDetail(1d) { 


14. wx. navigateTol( { 

15. url: '../detail/detail?id= ' + id, 
16. }) 

17。 | 

18. 


19. module. exports = { 

20. getNewsList: getNewsList., 
21. getNewsByld: getNewsBylId, 
22. goToDetail: goToDetail 


23. } 
、 重 — 
5.3 页 面 文件 代码 展示 
首页 代码 展示 
WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 
1 
2. < swiper indicator ~— dots autoplay interval = '5000"' duration= '500'> 
3. < block wx:for= '{{[newsList[0|],newsList[1],newsList[2]]}}'wx:key= 'swiper{{index}}'> 
4. < SwWwiper 一 item> 
5. < image src = '{{itenm. poster} } '></image > 
6 . </ swiper — item> 
</block > 
8. </swiper> 
9. 


10. <! 一 一 新 闻 列 表 一 -> 


11. <view 1id= 'news — list'> 


12. <View class = 'list— item' wx:for = '{{newsList}}' wx:key= 'news{{index}}' wx:for— item= 
mews "> 
13。 < image src = '{{news. poster}}'></image > 
14. < text bindtap = 'goToDetail' data ~— id= '{{news. id}}'> 
Of{{news.title}}— {{news.add datel}l}</text > 
15. </view> 
16. < button plain loading = "{{loading}} bindtap = "loadMore"> 
17. {{loadMoreText}} 


18. </button > 
19. </view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 ， 


/x SW1per 区 域 样式 */ 
/1 一 1 swiper 组 件 */ 
swiper { 
height: 400rpx; 
| 
/¥*1 一 2 swiper 中 的 图 片 x*/ 
swiper image { 
width: 100%; 
height: 100%; 
} 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


iD 捕 


5 
二 


DGUm wm 


关上 上 性 
[| 


Var common = require('../../utils/common. js') 


Var 1SEnd = false 
var currentPage = 1 
Page( { 
/ x 
x 页面 的 初始 数据 
x/ 
data: { 
loading: false, 
loadMoreText: ' 加 载 更 多 ' 
}, 
/ 尖 共 
x 日 定义 函数 --- 跳 转 新 闻 浏 览 页 面 
x*x/ 
goToDetail: function(e) { 
let id = e.currentTarget. dataset. id 
common. goToDetail( id) 
}, 
/ ¥% 
* 日 定义 函数 -- 加 载 更 多 新 闻 
x/ 
loadMore: function{() { 
// 如 果 新 闻 尚 未 全 部 加 载 完 毕 , 并 且 按 钮 不 处 于 正在 加 载 状态 
if (!isEnd && !this. data. loading) { 
// 让 按钮 出 现 加 载 动画 
this. setDatal { 
loading: true 
}) 
setTimeout(() =>{ 
// 加 载 当 前 页 面 新 闻 数 据 
this. getNewsListByPage( currentPage) 
// 停止 按钮 加 载 动 夯 
this. setDatal { 
loading: false 
}) 
}, 1000) 


* 目 定 义 图 数 -- 获取 指定 页 数 的 新 闻 列 表 
x/ 
getNewsListByPage: function(page) { 
var that = this 
wx. request( { 
url: common. getNewsL1ist, 
data: { 
paye.: paye 
}, 
success: function(res) { 
// 获 取 新 闻 总 数 
let total = Tes. data. total 
// 奶 加 更 多 新 闻 数 气 
let list = that. data. newsList. concat(res. data. list) 
// 更 新 新 闻 数 据 和 新 闻 总 数 
that. setDatal { 


下 。 newsList: 11ist, 


57. total: total 

58. }) 

59. // 如 果 已 经 显示 全 部 新 闻 

60. if (list., length == total) { 
61. 1SEnd = true 

62. that. setDatal { 

63. loadMoreText: ' 已 无 更 多 ' 
64. }) 

65. } else { 

66. // 翻 到 下 一 页 

67. currentPaget+ 

68. } 

69. } 

70. }) 

71. }, 

72. /xx 

73. < 和牛 命 周 期 靖 数 -监听 页 面 加 载 
74. 关 1/ 

75. onLoad: function(options) { 

T6: this. getNewsListByPage(1) // 获 取 第 一 页 新 闻 数 据 
77. }, 

78. +}) 

新 闻 页 代码 展示 


WXML 文件 (pages/detail/ detail. wxml) 的 完整 代码 如 下 : 


< VlIew Class= Contalner > 
<!-- 一 新 闻 标 题 -一 > 
< View class = 'title'>{{article. title}}</view> 
<!-- 新 闻 图 片 -一 > 
< VlLIew Class = “ “Poster > 
< image src = '{{article. poster}}' mode = 'widthFix'></image > 
</view> 
<! 一 一 新 闻 正 文 -一 > 
<Vilew Class= Content > 
< text >{{article. content}}</text > 
</view > 
<! 一 一 新 闻 日 期 --> 


<view class = 'add date'> 时 间 : {{article.add date}}</view> 


Do amm 必 mw 


一 


5 
tn 司 《9 


< button wx:if = '{{isAdd}}' plain bindtap = 'cancelFavorites'> 间 已 收藏 </button > 
< button wx:else plain bindtap = 'addFavorites'> 包 点 击 收 藏 </button > 
. </view> 


WXSS 文件 (pages/detail/ detail. wxss) 的 完整 代码 如 下 : 
/x* 整体 容 毅 x* / 


. Container!{ 
padding: 15rpx; 
text ~ align: center; 
} 
/x* 新 闻 标 题 * / 
.titlef 
font 一 size: 14pt; 


> 
-] 与 1 


Do Bmk wa 吓 


line— height: 80rpx; 


10. 
11; 
12. 
13. 
14. 
.5 
16. 
17. 
19， 
19., 
20. 
21. 
a2 
-Ae 
24. 
ds 
26 . 
21. 
28. 
29. 
0: 
1 
32. 
5 
34. 


} 
/* 新 闻 图 片 */ 
. poster imagel{ 

width: 100%. 


} 


/* 新 闻 正 文 */ 


. Content{ 


} 


text — align: left.; 
font 一 size: 12pt; 
line ~ height: 60rpx; 


/x 新闻 日 期 */ 
.add datef{ 


} 


font 一 size: 1l2pt. 
text ~ align: right; 
line ~ height: 30rpx; 
margin ~— right: 25rpx; 
margin ~— top: 20rpx; 


/*“ 凡 击 收藏 "按钮 * / 


} 


button{ 


width: 250rpx; 
height: 100rpx; 
margin: 20rpx auto; 


JS 文件 (pages/ detail/ detail. js) 的 完整 代码 如 下 : 


Doom 本 wm 


IIRRRRRRFPRHFRHFR FE HP HP HP HH 情 
OR POLPoJ 人 UU 人 WN 


var common = require('../../utils/common. js') 
Pagel { 


// 添 加 到 收藏 夹 

addFavorites: function(options) { 
let article = this. data.article; 
wx. SetStorageSync(article. id, article); 
this. setData( {isAdd: true} ) ; 

}, 

// 取 消 收藏 

cancelFavorites: function() { 
let article = this. data. article; 
Wx. removeStorageSync(article. Id) ; 
this, setData( {isAdd: falsel} ); 

}, 

/ 尖 兴 
* 生命 周期 郴 数 -- 监听 页 面 加 载 
x/ 

onLoad: function(options) { 
// 获 取 携 市 的 新 闻 ID 编号 
let id = options. 1d 


// 检 查 当 前 新 闻 是 否 在 收藏 夹 中 
Var article = wx. getStorageSync( 1d ) 
// 已 存在 


if (article != '') { 
this. setDatal { 
isAdd: true., 
article: article 
}) 


// 获 取 当 前 新 闻 
// 添 加 到 本 地 缓存 
// 更 新 按钮 显示 


// 获 取 当 前 新 闻 
// 从 本 地 缓存 删除 
// 喝 新 按钮 显示 


29. 


} 


30. // 不 存在 

31. else { 

32. this. setData( {ishdd: false}) 
33. var that = this 

34. // 问 服务 器 发 出 请 求 获取 新 闻 
35. wx. request( { 

36. url: common. getNewsBVYId， 
37. data: { 

38. id: id 

39. }, 

40. success: function(res) { 
41. that. setData({ article: res. data[0| }) 
42. } 

43. }) 

44. } 

45. 上 

46. }) 

个 人 中 心 页 代码 展示 


WXML 文件 (pages/my/my. wxml) 的 完整 代码 如 下 : 


1. <! 一 登录 面板 -一 > 

2. <Vlew 1d = 'myLogin'> 

3. < block wx:if = '{{isLogin}}'> 

4. < image id= 'myIcon' src= '{{src}}'></image> 

5. < text id = 'nickName'>{ {nickName} }</text > 

6. </block > 

7. < button wx:else open — type = 'getUserlnfo' bindgetuserinfo= “getMVInfo > 

8. 未 登录 ,点 此 登录 

9. </button > 

10. </view> 

11. 

12. <! 一 一 我 的 收藏 -一 > 

13. <view id= ‘myFavorites'> 

14. < text > 我 的 收藏 ({ {num}})</text > 

15. <!-- 新 闻 列 表 -- > 

16. <vView 1d = 'news— list'> 

17. <Vliew class = 'list— item'wx:for= '{{newsList}}'wx:key = 'news{ {index}}' wx:for— item = 

‘news > 

18. < image src = '{{news. poster}}'></image> 

19. < text bindtap = 'goToDetail' data— id= '{{news. id}}'> 
Of{news.title}}—{{news.add datel}</text > 

20. </view > 

21. </view> 

22. </view> 


WXSS 文件 (pages/my/my. wxss) 的 完整 代码 如 下 : 


1 
2 
车 
4. 
2 
6 
7 


/* 登录 面板 * / 

# myLogin{ 
background — color: # 328EEB; 
height: 400rpx; 
display: flex; 
flex— direction: column; 
align ~ items: center; 


8. Justify— content: space ~ around; 
9. |} 

10. /<*1I-1I1L 头 像 图 片 关 / 
11. 井 myIcon{ 

12. width: 200rpx; 

] 3。 height: 200rpx; 

14. border 一 radius: 50 和 要 ， 
15. 】 

16. /¥* 1 一 2 微 信 昵称 */ 
17. #nickNamef 

18. color: White; 

19. } 

20. /* 我 的 收藏 * / 

21. #8mvFavoritest{ 

r* padding: 20rpx; 

23. } 


JS 文件 (pages/my. my.js) 的 完整 代码 如 下 ， 


1. var common = require('../../utils/common. js') 

2. Page({ 

3. / ¥x 

4. * 页 面 的 初始 数据 

= x*/ 

6. data: { 

7. num: 0, 

8. isLogin: false 

9 . }, 

10. // 获 取 收 藏 列表 

11. getMyFavorites: function() { 

12. let info = wx.getStoragelInfoSync() // 庶 取 本 地 组 存 信 息 
13. let keys = info. keys // 获 取 全 部 key 信息 
14. let num = keys. length /7 获取 收藏 新 闻 数 量 
15. 

16. let myList = [| 

17. for (var i = 0; i<num; i++) I 

18. let obj = wx.getStorageSync(keys|[i]) 

19. myList. push{( obj) // 将 新 闻 瀛 加 到 数组 中 
20. } 

21. // 更 新 收藏 列表 

2. this,. setDatal { 

23. newsList: myList, 

24. num: num 

25; }) 

26. 外 

27. // 获 取 微 信用 户 信息 

28. getMVInfo: function(e) { 

29. let info = e.detall.userInto 

30. this. setDatal { 

31. isLogin: true, // 确 认 登 录 状 态 

32. src: lnfo. avatarUrl], // 更 新 图 片 来 源 

33. nickName: info.nickName // 更 新 昵称 

34. }) 

35. // 获 取 收 藏 列表 

36. this. getMyFavorites( ) 

37. ks 


/ x 
* 目 定 义 图 数 -- 跳 转 新 闻 训 览 页 面 
x / 
goToDetail: function(e) { 
let id = e.currentTarget. dataset. id 


common. goToDetail( id) 
}, 
/ 尖 革 
x 生命 周期 郴 数 -- 监听 页 面 显 示 
关 1 
onShow: function() { 
if (this. data. isLogin) { 
// 获 取 收 藏 列表 
this. getMyFavorites( ) ; 


小 程序 云 开 发 . 基于 云 数 据 库 的 
高 校 新 闻 网 


为 了 让 开发 者 能 够 更 专注 于 小 程序 前 端的 开发 工作 ,腾讯 提供 了 云 开发 平台 帮助 开发 者 
快速 上 线 和 迄 代 小 程序 项 目 。 开 发 者 开通 云 开发 环境 后 无 须 自行 搭建 第 三 方 服务 器 即 可 享有 
存储 ,数据库 等 云 能 力 。 本 章 将 从 零 开 始 详解 如 何 开通 小 程序 云 环境 ,并 使 用 云 数据 库 改 造 前 
面 第 15 章 的 高 校 新 闻 网 小 程序 项 目 ， 

本 章 学 习 目 标 


了 解 什 么 是 云 开 发 ,掌握 云 开发 的 开通 步 又 ; 
掌握 创建 云 模 板 项 目 和 老 项 目 迁 移 的 步 又 ; 
掌握 云 数 据 集 创建 和 权限 设 定 的 步骤 ; 


掌握 小 程序 前 端 与 云 数 据 库 交 互 的 方法 。 


17.1.1 什么 是 云 开 发 


云 开 发 是 腾讯 提供 的 一 套 完整 原 生 云端 支持 和 微 信服 务 支持 ,开发 者 无 须 搭建 第 三 方 服 
务 器 ,可 以 直接 使 用 云端 能 力 开发 微 信 小 程序 .小 游戏 。 

云 开发 弱化 了 后 端 和 运 维 的 概念 ,开发 者 可 以 更 多 地 专注 于 小 程序 前 端 开发 ,直接 使 用 去 
平台 提供 的 API 进行 核心 业务 开发 ,并 实现 快速 上 线 和 和 迭代 。 该 能 力 与 开发 者 使 用 的 其 他 云 
服务 可 以 互相 兼容 , 即 可 以 同时 使 用 云 开 发 能 力 和 其 他 第 三 方 云 服务 。 


17.1.2 云 开 发 能 力 介 绍 


目前 云 开 发 能 力主 要 分 为 三 大 功能 , 即 云 函 数 、 云 存储 和 云 数据 库 ,具体 解释 如 下 。 

。 云图 数 : 在 云端 运行 的 函数 代码 ,开发 者 无 须 自 建 服务 器 , 微 信 私 有 协议 天 然 鉴 权 ; 

。 云 存储 : 小 程序 前 端 可 以 上 传 /下 载 云 端 文件 ,开发 者 无 须 自 建 存储 和 CDN ,在 云 开发 
控制 台 可 视 化 管理 ; 

云 数 据 库 : 以 MongoDB 为 基础 的 JSON 数据 库 , 开 发 者 无 须 自 建 数据 库 , 可 以 直接 在 
小 程序 前 端 或 云 函 数 中 对 数据 库 进 行 读 写 管理 。 


时 微 信 小 程序 开发 实战 - 微 课 视频 版 本 


云 开发 能 力 提 供 的 使 费 质 源 配额 如 表 17-1 所 示 。 
表 17-1 云 开 发 免费 资源 配额 


云 开 发 能 力 的 分 类 种 类 额 度 
5GB 
存储 - 传 操作 次 60 万 次 /月 
外 网 下 行 流量 无 
CDN 回 源流 量 5 吉凶 六/ 月 
CDN CDN 站 5 吉 字 节 / 月 
20 万 次 /月 
50 个 
1 襄 字 区 /月 
20 
2GB 
30 
20 
数据 库 5 万 次 /天 


RR 
集合 限制 100 个 


单个 集合 穴 引 限制 20 个 
注意 : 以 上 是 单个 云 环境 的 配额 ,不 是 全 部 云 环境 的 总 和 。 


17.1.3 云 开 发 的 开通 步 又 


用 户 可 以 按照 以 下 3 个 步骤 开通 云 开 发 能 力 。 

新 建 云 开发 模板 

首先 开发 者 使 用 微 信 web 开发 者 工具 新 建 一 个 空白 项 目 , 必 须 填 人 AppID( 不 可 使 用 游 
客 模式 或 测试 号 ) ,然后 选中 “小 程序 ， 云 开发 ”, 即 可 生成 一 个 目 带 云 开 发 模板 样 例 代 码 的 云 
开发 项 目 。 

云 开发 项 目 在 上 月 动 生 成 后 目录 结构 和 普通 小 程序 不 同 , 根 目 录 中 会 出 现 cloudfunctionRoot 
目录 用 于 存放 云 田 数 ,并 且 在 project. config. json 文件 中 新 增 了 该 目录 的 同名 字段 。 

需要 注意 的 是 , 云 能 力 要 求 基础 库 2.2. 3 及 以 上 版 本 的 支持 。 

开通 云 开发 

在 创建 完 第 一 个 云 开 发 项 目 后 ,还 需要 手动 开通 云 开 发 功能 才 可 继续 使 用 。 单 击 微 信 
web 开发 者 工具 顶端 的 “ 云 开 发 ”按钮 打开 云 控 制 台 ,根据 提示 填写 开通 云 开 发 。 在 上 默认 情况 
下 可 以 免费 创建 两 个 云 环 境 ( 创 建 的 第 一 个 环境 自动 成 为 默认 环境 ) ,每 个 环境 都 有 唯一 的 ID 
表示 ,并 且 独 立 包 含 数 据 库 .存储 空间 和 云图 数 配 置 等 资源 ,彼此 隅 离 , 互 不 干扰 。 

需要 注意 的 是 ,首次 开通 云 环境 后 需要 等 待 10 分 钟 左右 才 可 正常 使 用 云 API。 开 通 完 成 
后 即 可 在 微 信 web 开发 者 工具 的 模拟 需 上 体验 云 开 发 的 相关 能 力 。 


云 控制 台 管理 
开通 云 环 境 后 单 击 微 信 web 开发 者 工具 顶端 的 “ 云 开 发 ”按钮 即 可 进入 云 控制 台 进 行 可 
视 化 管理 ,如 图 17-1 所 示 。 


| @ 虽 目 日 @ dg 


概览 用 户 管理 。 ”数据库 ”存储 管理 。 云 国 教 统计 分 析 


环境 名 称 ; teal 二 油 0 ; t#1e6946 牛 套餐 版 本 ; 于 础 版 


学 日 AP 调用 


Ow 


17-1 云 开 发 控制 台 概 览 图 


控制 台 主 要 提供 以 下 6 个 选项 。 

。 概览 : 查看 当前 环境 名 称 、ID 和 套餐 版 本 ,以 及 数据 概览 信息 ,包括 今日 活跃 用 户 数 、 
API 调用 .数据库 容量 存储 容量 和 CDN 流量 情况 等 ; 

用 户 管理 : 查看 和 管理 使 用 小 程序 项 目的 用 户 信息 ,包括 用 户 的 头像 性别. 昵称 、 城 
市 .注册 时 间 、 最 后 一 次 进入 时 间 以 及 用 户 的 openid; 

数据 库 : 查看 和 管理 数据 库 , 包 括 对 其 中 数据 集 的 CRUD 操作 和 访问 权限 管理 ; 

。 存储 管理 : 查看 和 管理 存储 空间 ,可 以 分 配 访问 权限 ; 

云图 数 : 查看 和 管理 云图 数列 表 ,配置 和 日 志 情 况 等 ; 

统计 分 析 : 分 别 展示 API 调用 数据库 .存储 和 云图 数 的 调用 情况 或 资源 使 用 量 。 


17.2.1 创建 云 模板 项 目 


首先 需要 创建 一 个 云 开 发 项 目 , 在 任意 盘 符 下 创建 一 个 空白 文件 夹 (例如 
cloudNews) ,然后 填 和 人 AppID 和 选中 “小 程序 ， 云 开发 ”, 如 图 17-2 所 示 。 

接着 删除 其 中 无 用 的 模板 代码 : 

(1) 删除 cloudFunctions 文件 夹 下 的 默认 云图 数 login 的 全 部 内 容 。 

(2) 找到 app. json 文件 ,打开 并 删除 其 中 的 页 面 引 用 ,只 保留 第 一 个 pages/index/index。 

(3) 打开 便 盘 中 的 pages 文件 严 ,删除 index 以 外 的 所 有 目录 。 

(4) 进入 index 文件 夹 ,删除 多 余 的 图 片 , 以 及 JS、WXML 和 WXSS 文件 中 的 全 部 代码 


sme 


CloudNews 
E:Wwxdemo_workspace\cloudNewd 


wx19079110a0f01e83 
车 无 ApplD 可 注册 
或 使 用 测试 号 
小 程序 
务 “， ) 不 使 用 云 服务 
全 小 程序 - 云 开发 
建 服 务 嚣 ， 使 用 平台 提供 的 API 进行 核心 业务 开 点 ， 即 可 实现 小 程序 快速 上 和 彝 和 
选 代 。 了 解 详 情 


腾讯 去 


图 17-2 云 模板 项 目 填写 效果 示意 图 


(JS 文件 删除 干净 后 输入 关键 词 page 让 它 目 动 生成 Page({1)) 图 数 的 相关 代码 ) 。 
(5) 删除 app. wxss 中 的 代码 。 
(6) 删除 image 文件 夹 中 的 所 有 图 片 。 
(7) 删除 style 文件 夹 ,此 时 项 目 清 理 全 部 完成 。 


17.2.2 迁移 老 项 卓 


现在 需要 将 第 15 章 newsDemo 中 的 相关 文件 合并 到 当前 新 建 的 云 项 目 
中 ,具体 步骤 如 下 : 

(1) 将 newsDemo 中 images 文件 夹 内 的 图 片 复制 .粘贴 过 来 。 

(2) 将 newsDemo 中 的 utils 文件 严复 制 .粘贴 过 来 。 

(3) 将 newsDemo 中 pages 文件 夹 内 的 所 有 内 容 复 制 、. 粘贴 过 来 ,其 中 index 文件 夹 全 部 
符 换 。 

(4) 将 newsDemo 中 的 app. json 和 app. wxss 文件 蔡 换 过 来 ,此 时 项 目 迁 移 完 成 。 


17.2.3 部署 云 数 据 库 


具体 操作 如 下 : 

(1) 将 若干 条 新 闻 数 据 做 到 Excel 表格 里 面 ,第 一 行为 标题 。 

(2) 将 Excel 表格 文件 男 存 为 CSV 格式 。 

(3) 安装 Notepad++ 软 件 ,打开 CSV 文件 ,转换 为 utf8 编码 格式 ,并 保存 。 
(4) 打开 云 开发 控制 台 , 创 建 一 个 新 的 数据 集 , 例 如 news。 

(5) 检查 news 数据 集 的 权限 ,确认 权限 选择 的 是 “所 有 用 户 可 读 , 仅 创建 者 及 管理 员 可 与 ”。 


(6) 导入 CSV 文件 ,完成 。 


效果 如 图 17-3 所 示 。 


请 接 field-walue 的 盾 字 


"add date”-2018/6/14 
"content“ 本 网 讯 { 记 学 生 记 者 国 月 亲 面 任 晤 玉 党 委 宣 传 部 豆 驹 平 / 广 入 强 / 图 ) 潜 后 苔 芭 ,江淮 涵 汤 。6 月 13 日 ,由 
"1" 288255 


"poster http//mww ahnu.edu.cniuploads/20180614/20180614075547 _64467.jpg 
间 看 所 有 


" dcaltg0eedfidabddcsa4cs 

"add date™ 20186/14 

"content 可 网 讯 【 美 机 学院 王 伟 ) 6 月 13 日 ， 由 安徽 省 委 宣 传 部 、 省 委 禾 育 工 委 主 办 ， 省 文联 、 去 例 清 艺 重 团 、 安 出 
"id"288276 

OSI httpAwww ahnu edu Cruploadsmnolan61420180614080100 85593 jpg 

查看 所 有 


图 17-3 云 数 据 库 中 的 news 数据 集 效 果 图 


主要 字段 参考 如 下 ,开发 者 也 可 以 根据 实际 需要 上 自行 修改 或 追加 其 他 字段 。 
title: 新 闻 标 题 ; 

add date: 添加 日 期 ; 

content: 正文 内 容 ; 

poster: 新 闻 图 片 ，。 


17.3.1 展示 新 闻 列 表 
首先 需要 去 掉 原来 的 临时 数据 ,修改 index. js 文件 ,清空 其 中 的 data 初 


* 页 面 的 初始 数据 


// 这 里 的 所 有 数据 清空 即 可 


mn 


然后 进行 云 数 据 库 的 新 闻 读 取 ,修改 index. js 文件 ,在 其 顶部 添加 如 下 代理 : 


const db = wx.cloud. database() 
db. collection( 'news') 


修改 index. js 中 的 onLoad 限 数 : 


1. We 

* 生命 周期 函数 -监听 页 面 加 载 

3. “ 

4. onLoad: function(options) { 

5. news. limit(5).get({ 

6. success:res=>{ 

7. this. setData( {newsList: res. data}) 
8. } 

9. }) 

10. }， 


上 述 代码 表示 从 去 数据 库 的 news 数据 集中 读 取 前 5 条 新 闻 记 录 , 开 发 者 可 以 修改 limit(5) 
里 面 的 数字 。 此 时 重新 运行 ,新 闻 列 表 成 功 读 取 到 ,如 图 17-4 所 示 。 


17.3.2 展示 滨 动 图 片 


深 动 图 片 可 以 由 开发 者 定义 显示 最 新 的 3 一 5 张 ,以 3 张 为 例 , 修 改 代码 
如 下 : 


视频 讲解 
1， 二 = 全 灯 片 二 > 
2. <Swlper indicator ~— dots autoplay interval = "5000"' duration= '500 > 
3 < block wx:for= '{{[newsList[0],newsList[1],newsList[2]]}}'wx:key = 'swiper{{index}}'> 
4 < swiper 一 item> 
5 < image src = '{{item. poster}} '></image > 
6 </swiper — item > 
7 </block > 
8. </swiper> 


此 时 重新 运行 , 深 动 图 片 成 功 显 示 , 如 图 17-5 所 示 。 


是 入 重量 年 Ch 


\ z ep z 
文化 名 家 进 高 校 ” 专 场 文 关注 出 首 站 走 进 ME em 文艺 渍 出 首 站 走 进 
安徽 师范 大 学 一 “2018/6/14 


[5 和 6 大 字 一 2018/6/14 


s 第 文联 “文化 名 衣 进 高 校 ” 冰 动 走 进 安 葡 师 


| 省 文联 “文化 名 家 进 高 校 ， 活 动 走 进 安南 师 
本 时 范 大 字 美 趟 字 尾 一 一 2018/6/14 站 范 大 字 美 不 学 属 一 一 2018/6/14 


= 办 垃 外 国语 学 院 教 师 参与 制定 中 国 英语 能 填 5 我 校外 国语 学 院 教师 参 与 制定 中 国 莫 语 能 力 
等 乃 量 表 工 作 受到 教育 吕 考 试 中 心 致 谢 一 | 敌 设 量 委 工作 受到 教育 部 考试 中 心 致谢 一 一 
2018/6/14 1 2018/6/14 

师 生产 谈 会 上 的 重要 讲话 稍 补 一 一 


2018/6/14 
4 
EE- 


17-4 首页 新 闻 列 表 展 示 效 果 图 图 17-5 ”首页 顶端 滚动 图 片 效 果 图 


17.3.3 人 触 底 自 动 加 载 新 闻 列表 


首先 修改 index. json 文件 ,在 其 中 添加 新 属性 onReachBottomDistance: 


1. 1{ 
2 "onReachBottomDistance" :100 
3. |]} 


上 述 代码 表示 一 旦 页 面 下 拉 触 到 底部 100 像素 的 位 置 ,就 触发 触 底 事件 。 
修改 index. js 文件 ,在 顶端 声 明 当 前 页 面 page 和 每 次 读 取 新 闻 数 量 row: 


1]. const row = 5 
2. var page = 0 


修改 index. js 中 的 onLoad 图 数 , 将 固定 值 limit(5) 改 成 limit(row): 


1. / 关 关 

2. * 生命 周期 靖 数 一- 监听 页 面 加 载 

3. 关 / 

4. onLoad: function(options) { 

5. news. limit(row). get({ 

6. success:res = >1 

Ts this. setDatal( {newsList:res. data}) 
8. } 

9. }) 

10. 本 

修改 index. js 中 的 onReachBottom 图 数 ,每 次 更 新 新 闻 列 表 ， 
1. / xx 

- * 页 面 下 拉 触 的 事 件 的 处 理 函 数 

二 关 / 

4. onReachBottom: function() { 

村 // 翻 下 一 页 

6. Page++ 

ra // 获 取 当 前 页 面 的 新 闻 记 录 

8. news. skip(row * page).1imit(row).get({ 
9. success: res => 1 

10. // 获 取 原 有 的 新 闻 记 录 

11. let old data = this. data. newsList 
和， // 获 取 新 页 面 的 新 闻 记 录 

13. let new data = res. data 

14. // 更 新 首页 新 闻 列 表 

15. this. setDatal( { 

16. newsList: old data. concat (new data) 
Ls }) 

18. } 

19. }) 

20. Es 


此 时 拉 到 页 面 底 部 就 可 以 更 新 出 新 闻 列 表 了 。 


17.3.4 点 击 新 闻 列 表 传 递 新 闻 编 所 


如 果 和 硕 望 阅读 页 面 显 示 不 同 的 新 闻 内 容 , 需 要 知道 新 闻 编 号 。 


修改 index. wxml 如 下 : 


1. <!-- 一 新 闻 列 表 --> 
2. <Vlew 1d= 'news— list'> 
3 <view class = 'list— item' wx:for= '{{newsList}}'wx:key = 'news{{index}}' wx:for— item= 


DeWS > 
4. < image src = '{{news. poster}}'></image > 
< <text data— id= '{{news. id}}' bindtap = 'goToDetail'> 


ON{{news.title}} -- {{news.add datel}l}</text > 
6. </view> 
7. </view> 


上 述 代码 表示 点 击 新 闻 标 题 时 附带 ID 编号 ,然后 修改 index. js 中 的 goToDetail 郴 数 : 


#* 目 定 义 图 数 -- 跳 转 新 闻 浏 览 页 面 
x/ 
goToDetail: function(e) { 
common. goToDetail(e. currentTarget. dataset. id) 
}, 


然后 更 新 utils 文件 夹 中 的 common. js 文件 ,删除 已 经 不 需要 的 模拟 数据 const news, 以 


nm PP 


及 因数 getNewsList 和 getNewsDetail, 并 新 增 月 定义 图 数 goToDetail, 用 于 跳 转 新 闻 浏 宠 
页 面 : 


1,. 5 

2. 上 月 定义 函数 --- 跳 转 新 闻 浏 览 页 面 
x 

4. function goToDetail(id) { 

5 wx. navigateTol( { 

6. url: '../detail/detail?id= "+ id, 
CF }) 

8. } 

9. 


10. module. exports = { 
11. goToDetail: goToDetail 
12. | 


这 样 点 击 跳 转 到 detail 页 面 时 就 可 以 传递 新 闻 编 号 。 


新 闻 阅 读 页 的 改造 主要 集中 在 如 何 获 取 新 闻 正 文 内 容 。 
修改 detail. js 文件 ,在 其 顶部 添加 如 下 代码 : 


1. const db = wx.cloud. databasel ) 
2. const news = db.collectionl( 'news') 


然后 修改 detail. js 中 的 onLoad 负数 : 


1 . / 尖 关 

二 * 生命 周期 图 数 -- 监听 页 面 加 载 
3. Sf 

4. onLoad: function(options) { 


5 // 显 示 loading 提示 框 

6. wx. ShowLoading({ 

7. title: ' 数 据 加 载 中 ' 

8. }) 

9. 

10. // 医 取 新 闻 编 号 

11. let 1d = options. 1d 

12. // 根 据 新 闻 ID 查找 新 闻 是 否 在 收藏 夹 中 

13. let article = wx. getStorageSync( id) 

14. 

15. // 新 闻 在 收藏 夹 中 

16. if (article != '') { 

17. // 更 新 页 面 上 的 新 闻 信 息 和 收藏 状态 

18. this. setDatal { 

19. article: article., 

20. isAdd: true 

21. }) 

2 / /隐藏 loading 提示 框 

23. wx. hideLoading!( ) 

24. } 

25. // 新 闻 不 在 收藏 夹 中 

26. else |{ 

27, // 根 据 新 闻 了 在 云 数据 集中 查找 新 闻 内 容 

28. news. doc( id). get({ 

29. success: res => { 

30. // 更 新 页 面 上 的 新 闻 信 息 和 收藏 状态 

31 . this. setDatal { 

32. article: res. data, | 

村 本 isAdd: false 本 网 讯 ( 大 学 生 记 者 团 肖 欧 药 任 曼 玉 党 委 宣 传 部 

c }) 总 黎平 / 文 冰 强 /图 ) 洪 岳 苦 苞 ,江淮 汤 汤 。6 月 13 

35. // 隐藏 loading 提示 框 日 ,由 省 委 宣 传 部 、 省 委 教 育 工 委 主 办 ， 省 文联 、 

36. wx. hideLoading( ) 安徽 演艺 集团 等 单位 联合 开展 的 “文化 名 家 进 高 

37 } 校 ” 系 列 活动 首 站 走 进 安徽 师范 大 学 。 下 午 4 

38. }) 点 ，“ 传 承 与 梦想 ” 安 坝 师范 大 学 专场 文艺 演出 在 

39 } 花 津 校区 大 礼堂 拉 开 序幕 。 省 委 常 委 、 宣 传 部 长 虚 

40 }, 爱 华 ， 省 委 宣 传 部 副 部 长 洪 永 平 ， 省 委 教 育 工 委 副 
书记 王 佩 刚 ， 省 文联 党 组 书记 、 副 主席 、 书 记 处 第 

运行 和 py I | 
Rt ,新闻 内 容 成 功 读 取 到 ,如 图 17-6 pe 
A 。 


个 人 中 心 页 的 改造 主要 集中 在 如 何 浏 览 已 收藏 的 新 闻 , 与 自 页 的 扣 击 跳 
转 新 闻 内 容 功 能 类 似 , 首 先 修 改 my. wxml 中 收藏 列表 的 代码 : 


1. <! 一 一 新 闻 列 表 --> 


2. <View 1d = 'news— list'> 

3 < view class = 'list 一 Item ”wx: for = '{{newsList}}' wx: key = 'news 视频 讲解 
{{index}}' wx:for— item= 'news'> 

4. < image src = '{{news. poster} } '></image > 

5 <text data— id= '{{news._ id}}' bindtap = 'goToDetail'> 


Of{{news.title}} -- {{news.add date}}</text > 
6 . </view> 


了 ， </view> 


上 述 代码 为 < text > 组 件 的 data-id 属性 更 新 了 新 闻 ID 编号 。 
然后 在 对 应 的 my. js 文件 中 修改 goToDetail 函数 的 内 容 ,代码 片段 如 下 : 


/xx 

* 明定 义 函数 --- 跳 转 新 闻 浏 览 页 面 

关 / 
goToDetail: function(e) { 

common. goToDetail(e. currentTarget. dataset. id) 
}, 


最 终 运 行 效 来 如 图 17-7 所 示 。 


On PP 


"文化 名 家 进 高 校 ” 专 场 广 艺 演出 首 站 走 进 
安徽 师 沁 大 学 


找 的 收藏 (2) 


PP “文化 名 家 进 高 以 ” 才 场 文艺 浓 出 兽 站 


"Hi 走 进 安徽 师 莹 大 字 _ 2018-06_14 


本 网 讯 ( 大 学 生 记者 团 崩 梦 茹 任 最 玉 常委 官 传 部 
课 歼 平 / 文 闻 强 /图 ) 潜质 苦 营 ， 江 淮 汤 汤 。 6 月 13 
日 ， 由 省 委 宦 传 部 、 省 委 教 育 工 委 主 办 ,省 文联 、 
安 册 于 三 华 团 等 单位 联 台 开展 的 “文化 名 宕 进 高 
校 ” 系 列 活动 首 站 走 进 安徽 师范 大 学 。 下 午 4 

点 ， "传承 与 楚 想 ”安徽 师范 大 学 专场 文艺 演出 在 
花 津 校区 大 礼堂 拉 开 序幕 。 省 委 常 委 、 宣 传 部 长 虎 
爱 华 ， 省 委 宣 传 部 副 部 长 洪 永 平 ， 省 秀 教育 工 委 副 
| 书记 王 佩 刚 ， 省 文联 党 组 书记 、 副 主席 、 书 记 处 第 


(a)“ 我 的 收藏 ”列表 (b) 济 虹 收藏 的 新 闻 
17-7 浏览 已 收藏 新 闻 的 效果 


此 时 整个 项 目 就 全 部 改造 完毕 ,由 于 图 片 地 址 有 可 能 在 示例 高 校 运 维 网 站 群 平台 时 发 生 
变化 ,开发 者 可 以 蔡 换 成 日 已 所 在 等 校 的 其 他 图 片 的 URL 地 址 。 


17.6.1 应 用 文件 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


{ 


“pages : | 
"pages/ index/ index", 


让 《ko 搬 


"pages/my/my", 


5 "pages/detail/detail" 

6. ] ， 

7. "window” : { 

8 "navigationBarBackgroundColor" : " # 328EEB", 
9. "navigationBarTitleText":" 我 的 新 闻 网 ” 
10. 上 

11. "tabBar”: { 

12. "color": "#000", 

13. "selectedColor”" : " # 328EEB", 

14. “list : [ 

15. { 

16. "pagePath" : "pages/index/ index", 
17. "text": "首页 "， 

18. "iconPath": "images/index. png", 

19. "selectedIconPath" : "images/index blue. png" 
20， ts 

21. | 

2 "pagePath": "pages/my/my", 

23. "text" :" 我 的 "， 

24. " iconPath" : "images/my. png", 

25. "selectedIconPath" : "images/my blue. png" 
26. } 

27. ] 

28. } 

29. |] 

app. wxss 文件 的 完整 代码 如 下 : 

1. /* 新闻 列表 区 域 样式 */ 

2. /x*2--1 新闻 列表 容 闸 x*/ 

3. #news— list { 

4. min— height: 600rpx; 

3 padding: 15rpx; 

6. } 

7. /x*2-2 列 表 项 目 </ 

8. .list— item{ 

9 . display: flex; 

10. flex— direction: row; 

11. border — bottom: lrpx solid gray; 

12. } 


13. /x*2 一 3 新闻 图 片 */ 
14. .list— item imagel{ 
15. width:230rpx; 

16. height: 150rpx; 
17. margin: 10rpx; 

18. } 

19. /*2-4 新 闻 标 题 */ 
20. .list— item text! 
21. width: 100%.: 

二 过。 line— height: 60TrPx; 
23. font — size: 10pt; 
24. } 


17.6.2 公共 因数 文件 代码 展示 
JS 文件 (utils/common.js) 的 完整 代码 如 下 、 
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DOJ Np 


于 
Lu ho 上 避 


/ x 
* 肯定 义 函 数 --- 跳 转 新 闻 浏 览 页面 
function goToDetail(id) 1 


wx. navigateTol( { 
url: '../detail/detail?id= '+ id, 
}) 


. module.exports = { 


goToDetail: goToDetail 


6.3 页 面 文件 代码 展示 


首页 代码 展示 
WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


1. < 一 一 区 灯 片 一 一 > 

2. < swiper indicator ~ dots autoplay interval = '5000" duration = "500 "> 

3. < block wx:for= '{{[newsList[0],newsList[1],newsList[2]]}}' wx:key = 'swiper{ {index}}'> 

4. < SWiper 一 item > 

5. < image src = '{{item. poster} } '></image > 

6. </ swiper — item> 

于 </block > 

8. </swiper > 

9 . 

10，<!-- 新 闻 列 表 -- > 

11. <view 1d= ‘news— list'> 

12. <View class = 'list— item' wx:for= '{{newsList}}' wx:key= 'news{l{index}}' wx:for— item = 

‘News > 

13. < image src = '{{news. poster}}'></image > 

14. < text bindtap = 'goToDetail' data— id= '{{news. id}}'> 
ON{{news.title}} -- {{news.add date} }</text > 

15, </view> 

16. <button plain loading = "{{loading}}" bindtap = "lJoadMore"> 

17. {{loadMoreText}} 

18. </button> 

19. </view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


I 二 相 Cu lo 搬 


/ * swiper 区 域 样式 */ 
/x*1 一 1 swiper 组 件 */ 
swiper { 

height: 400rpx; 
} 
/x*1 一 2 swiper 中 的 图 片 */ 
swiper image { 

width: 100%; 

height: 100%.; 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 ， 


1. Var common = require('../../utils/common. js') 
2. const db = wx.cloud. databasel ) 

3. const news = db.collection( 'news') 

4. 

5. Var row = 5 // 每 次 证 取 的 新 闻 数 量 
6. var page = 0 // 当 前 是 第 几 页 
$s 

8. Pagel{ 

9. / x 

10. * 页 面 的 初始 数据 

11. 关 / 

1 data: 1 

13. 

14. bs 

15. /x 

16. * 日 定义 函数 -- 跳 转 新 闻 浏 昂 页 面 

17. x*x/ 

18. goToDetail: function(e) { 

19. common. goToDetail(e. currentTarget. dataset. id) 
20. } ， 

21. /xx 

22. * 生命 周期 困 数 -- 监听 页 面 加 载 

23. x*x/ 

24. onLoad: function(options) { 

25. news. limit(row). get({ 

26. success: res =>1 

27. this, setDatal { 

28. newsList: res. data 

29. }) 

30. } 

31., }) 

32. } ， 

33. 1}) 

新 闻 页 代码 展示 


WXML 文件 (pages/detail/ detail. wxml) 的 完整 代码 如 下 ; 


1 <Vlew class= ‘container'> 

2 <!-- 新 闻 标 题 -一 > 

3 < View class = 'title'>{{article. title} }</view > 

4 <! 一 一 新 闻 图 片 -一 > 

5. < view Class =“ Poster > 

6 < image src = '{{article. poster}}' mode = 'widthFix'></image > 
7 </view> 

8 <!-- 新 闻 正 文 --> 

9 . < VlewClass = Content > 

10. < text >{{article. content}}</text > 

11. </view> 

12. <!-- 新 闻 日 期 -~-> 

13. < View class = 'add date'> 时 间 : {{farticle. add date} }</view> 


15. < button wx:if = '{{isAdd} }' plain bindtap = 'cancelFavorites'> 已 收藏 </button > 
16. <button wx:else plain bindtap = 'addFavorites 人 > 点 击 收 藏 </button > 
17. </view> 


WXSS 文件 (pages/detail/detail. wxss) 的 完整 代码 如 下 : 


iD 


UN FF HH HP 
相 


JS 文件 (pages/ detail/ detail. js) 的 完整 代码 如 下 : 


iD 捕 


关上 
-no 


/ * 整体 容器 x / 
. Container!{ 
padding: 15rpx; 
text 一 align: center; 
} 
/* 新 闻 标 题 * / 
.titlef{ 
font — size: 14Ppt; 
line— height: 80rpx; 
} 
/* 新 闻 图 片 */ 
. poster imagel 
width: 100%. 
} 
/* 新 闻 正 文 */ 
. Content{ 
text ~ align: left; 
font 一 size: 1l2pt; 
line— height: 60rpx; 
} 
/x* 新 闻 日 期 */ 
.add datel 
font 一 size: 12Ppt; 
text ~ align: right; 
line— height: 30rpx; 
margin — right: 25rpx; 
margin — top: 20rpx; 
} 
/ x “点 击 收藏 > 按钮 * / 


. buttonf{ 


width: 250rpx; 
height: 100rpx; 
margin: 20rpx auto; 


} 


Var common = require('../../utils/common. js') 
Pagel { 
/ x 
*x 月 定义 函数 -- 添加 到 收藏 夹 
x*/ 
addFavorites: function() 1 
let article = this. data.article 
WX. SetStorageSync(article. id, article) 
this. setDatal { 
ishdd: true 
}) 
}, 


/ 尖 尖 
* 日 定义 函数 -取消 收藏 
x 


cancelFavorites: function() { 


18. 


let article = this,., data. article 


19. wx. removeStorageSync(article, id) 
20. this. setDatal { 

1, i1sAdd: false 

92. }) 

23. 

24. 

25. /xx 

26. < 个 命 周 期 函数 一 -监听 页 面 加 载 

2 关 1/ 

28. onLoad: function(options) { 

29. // 显 示 loading 提示 框 

30. wx. ShowLoading( { 

31. title: ' 数 据 加 载 中 ， 

2. }) 

33. 

34. // 获 取 新 闻 编 号 

EC let 1d = options. 1d 

36. // 根 据 新 闻 ID 查找 新 闻 是 否 在 收藏 夹 中 
37. let article = wx. getStorageSync(1d) 
38. 

39. // 新 闻 在 收藏 夹 中 

40. if (article != ') { 

41. // 更 新 页 面 上 的 新 闻 信 息 和 收藏 状态 
42. this. setDatal { 

43. article: article, 

44. 1SAdd: true 

45. }) 

46. // 隐藏 loading 提示 框 

47. wx. hideLoading( ) 

48. } 

49. // 新 闻 不 在 收藏 夹 中 

50. else |{ 

51. // 根 据 新 闻 ZID 在 云 数 据 集中 查找 新 闻 内 容 
52. news. doc{ id).get(f{ 

< 并 success: res => { 

54. // 更 新 页 面 上 的 新 闻 信 息 和 收藏 状态 
-5 this. setDatal { 

56. article: res. data, 

57. 1SaAdd: false 

58. }) 

59. // 隐 藏 loading 提示 框 

60. wx. hideLoading( ) 

61. | 

62. }) 

63. } 

64. }， 

65. 

个 人 中 心 页 代码 展示 


WXML 文件 (pages/my/my. wxml) 的 完整 代码 如 下 : 


上 ， 
2 
E 


<!- 一 登录 面板 -一 > 


<Vlew 1d = myLogln > 


< block wx:if = '{{isLogin}}'> 


4. < image id = 'myIcon' src= '{{src}} '></image> 

5. < text id = 'nickName'>{ {nickName} }</text > 

6. </block > 

7. < button wx:else open ~— type = 'getUserInfo' bindgetuserinfo = 'getMyInfo'> 

8. 未 登录 ,点 此 登录 

9. </button > 

10. </view> 

11. 

12. <!-- 我 的 收藏 --> 

13. <view 1d = 'myFavorites'> 

14. < text > 我 的 收藏 ({{num}})</text > 

I Es 

16. <vliew ld= "mews 一 list'> 

17. < VlIew Class= '] 1st 一 item' wx:for= '{{newsList}}'wx:key = 'news{{index}}'wx:for— item= 

DewS "> 

18. < image src = '{{news. poster}}'></image > 

19. < text bindtap = 'goToDetail' data— id= '{{news. id}}'> 
Of{{news.title}} -- {{news.add date} }</text > 

20. </view > 

21 . </view> 

22. </view> 


WXSS 文件 (pages/my/my. wxss) 的 完整 代码 如 下 : 


1 
2 
3 
4. 
J 
6 
7 
8 
9 


/ * 登录 面板 */ 
H myLogint{ 
background — color: # 328EEB; 
height: 400rpx; 
display: flex; 
flex— direction: column; 
align— items: center; 
Justify— content: space ~ around; 


} 


. /x*1-1 头像 图 片 */ 


并 myIcon{ 
width: 200rpx; 
height: 200rpx; 
border 一 radius: 50$.; 
} 


. /x* 1 一 2 微 信和 昵称 x / 


# nickNamel{ 
color: White ; 


} 


. /* 我 的 收藏 * / 


# myFavoritest{ 
padding: 20rpx; 
} 


JS 文件 (pages/my/my.js) 的 完整 代码 如 下 : 


Le 


Var common = require('../../utils/common. js') 
Pagel( { 
/ x 
x 页 面 的 初始 数据 
4 
data: { 


}, 
9. / x 
10. * 日 定义 函数 --- 跳 转 新 闻 浏 览 页 面 
11. x 
12. goToDetail: function(e) { 
13. common. goToDetail(e. currentTarget. dataset. id) 
14. }, 
15. /xx¥ 
16, * 目 定 义 函 数 --- 获取 用 户 微 信 个 人 信息 
17. wi 
18. getUserInfo: function(e) { 
19. console. log(e. detail. userInfo) 
20. let lnfo = e.detall.userInfto 
21. this. setDatal { 
22. 1SLogln: true, 
3 src: lnfo. avatarUr], 
24. nickName: info. nickName 
25, }) 
26. 
27. this. getMyFavorites( ) 
28. bs 
29. /xx 
30. * 日 定义 函数 -- 获取 收藏 列表 
31. */ 
32. getMyFavorites: function() { 
33. let info = wx. getStorageInfoSync!() 
34. let keys = info. keys 
35. let num = keys. length // 收 藏 的 新 闻 总 数 
36. 
37. let mvyList = [|] 
38. for (var i = 0; i<num; i++) { 
39. let obj = wx.getStorageSync(kevs[1|) 
40. myList. push{ obj) 
41. } 
42. 
43. this. setDatal { 
44. num: num, 
45. newsList: myList 
46. }) 
47. }, 
48. /x*¥ 
49. x* 生命 周期 函数 -监听 页 面 显 示 
50. 关 / 


51. onShow: function() { 
52. // 如 果 已 登录 , 则 更 新 收藏 列表 


53. if (this, data. isLogin) { 
54. this. getMyFavorites( ) 
wi } 

56 . } ， 


小 程序 云 开发 基于 云 存储 的 
电子 书 橱 


在 了 解 了 云 开 发 的 相关 能 力 后 ,读者 不 妨 尝试 将 前 面 第 7 章 的 电子 书 橱 小 程序 改造 成 基 
于 云 存 储 的 小 程序 项 目 。 改 造 后 的 小 程序 无 须 目 行 搭建 服务 送 , 可 以 在 小 程序 前 端 直接 使 用 
i A 了 使 用 。 


。 掌握 云 存 储 和 云 数 据 库 的 管理 操作 |; 
。 掌握 小 程序 前 端 与 云 数 据 库 交 互 的 方法 ; 
。 掌握 小 程序 前 端 下 载 云 文件 的 方法 。 


创建 云 模板 项 目 


首先 需要 创建 一 个 云 开 发 项 目 ,在 任意 盘 符 下 创建 一 个 空白 文件 夹 (例如 
cloudBooks) ,然后 填 人 AppID 和 选中 “小 程序 ，。 云 开发 ”, 如 图 18-1 所 示 。 

接着 删除 其 中 无 用 的 模板 代码 : 

(1) 删除 cloudFunctions 文件 夹 下 的 默认 云图 数 login 的 全 部 内 容 。 

(2) 找到 app. json 文件 ,打开 并 删除 其 中 的 页 面 引用 ,只 保留 第 一 个 pages/index/index。 

(3) 打开 便 盘 中 的 pages 文件 夹 ,删除 index 以 外 的 所 有 目录 。 

(4) 进入 index 文件 夹 ,删除 多 余 的 图 片 。 

(5) 删除 image 文件 夹 。 

(6) 删除 style 文件 夹 ,此 时 项 目 清 理 全 部 完成 。 


18.1.2 于 移 老 项 日 


现在 需要 将 第 7 章 booksDemo 中 的 相关 文件 合并 到 当前 新 建 的 云 项 目 
中 ,具体 步骤 如 下 : 

(1) 将 booksDemo 中 pages 文件 夹 内 的 所 有 内 容 复制 .粘贴 过 来 ,其 中 讽 顷 讲解 
index 文件 夹 全 部 蔡 换 。 


18.1.1 


sm 


cloudBooks 


_ EWwxdemo_workspace\cloudBooks 


| wx19079110a0f01e8a 


车 无 AppID 可 注册 
人 六 或 使 用 测试 号 


公众 号 网 页 


A 
选 代 。 了 解 详情 


站 古 讯 云 


图 18-1 云 模 板 项 目 填写 效果 示意 图 


迁移 完成 。 


18.1.3 部 署 云 文件 存储 


打开 云 开发 控制 台 ,选择 “存储 管理 "面板, 新建 文件 夹 books, 然 后 进入 并 将 王国 和 居 
需要 的 电子 书 资源 (PDF 格式 等 ) 上 传 到 云 文 件 存储 库 中 ,效果 如 图 18-2 所 示 。 


去 市 下 新 时 本 


Elouditess-1e6946 7465-S-1e .加 1.99MB 2019-09-29 18:15:65 


Cloud.iles-1e694e.7d55-tes-1e... 站 4d. 15MB 2019-03-29 18:16:15 


Cloud tes-16694e. 7465-tes-1e... 站 32 各 昌 2019-0-29 18:1508 


图 18-2 往 云 存储 库 中 上 传 电 子 书 示 意图 


18.1.4 部 署 云 数 据 库 


18.2.1 展示 图 书 列 表 
首先 需要 删除 原来 的 临时 数据 ,修改 index. js 文件 ,清空 其 中 的 data 初 


具体 操作 如 下 : 
(1) 将 图 书 数据 输入 Excel 表格 里 面 ,第 一 行为 标题 。 

(2) 将 Excel 表格 文件 另存 为 CSV 格式 。 

(3) 安装 Notepad++ 软 件 , 打 开 CSV 文件 ,转换 为 utf8 编码 格式 并 保存 。 
(4) 打开 云 开发 控制 台 , 创 建 一 个 新 的 数据 集 ,例如 books。 

(5) 检查 books 数据 集 的 权限 ,确认 权限 选择 的 是 "所 有 用 户 可 读 , 仅 创建 者 及 管理 员 可 与 
(6) 导入 CSV 文件 ,完成 。 

效果 如 图 18-3 所 示 。 


概览 用 户 管理 数据库 存储 管理 。 云 国 数 ”统计 分 析 


国 添加 第 合 i 索引 管理 权限 设置 


十 添加 记录 。 十 导入 (json 或 csv ,最 大 50M ) 个 导出 (json 或 tsv) 


= a 一 一 一 


”Id"509dt27deedioldabd9646ad 


"author™( 美 )Bruce Eckel 
EE "Coverur -https://img3.doubanio.com/view/subject/Vpublic/s27243455.jpg 
produe 
“TIE cloud-/ltes-1e694de.7465-tes-1e694e/books/book001.pdif 


和 "sbn* 未 知 


Student 


Userinio 


图 18-3 往 云 数据 库 中 录入 图 书 数据 


参考 字段 如 下 ,对 于 其 他 字段 ,开发 者 可 以 根据 实际 情况 自 巾 发挥。 

title: 书 名 ; 

author: 作者 ; 

。 price: 价格 ; 

*。 isbn: 书籍 的 ISBN 编号 ; 

。 coverurl: 封面 图 片 地 址 ; 

fileid: 云 文件 存储 库 中 的 文件 ID。 

其 中 图 书 封 面 地 址 来 源 于 豆瓣 图 书 频道 ,开发 者 也 可 以 自行 选择 其 他 素材 资源 。 


是 二 
站 


SC 第 18 章 小 程序 云 开发 . 基于 云 存 储 的 电子 书 机 


1 区 闪 

2 * 页 面 的 初始 数据 
关 1/ 

4. data: 1 

5 bookList: [ | 

6 }, 


修改 index. js 文件 ,在 其 顶部 添加 如 下 代码 : 


1. const db = wx.cloud. databasel ) 
2. const books = db.collection( 'books') 


然后 修改 index. js 文件 中 的 onLoad 图 数 : 


加 / 关 兴 

* 生命 周期 郴 数 -- 监听 页 面 加 载 

3 “yy 

4. onLoad: function(options) { 

5. books. get( { 

6. success:res= >1{ 

7. this. setData( {bookList: res. data} ) 
8. } 

9. }) 

10. 时 


上 述 代 码 表示 从 云 数据 集 books 中 读 取 图 书信 息 。 
接着 修改 index. wxml 页 面 的 代码 ,为 wx:for 循环 内 部 的 元 素 匹 配 数据 集 里 的 字段 : 
<!-- 图 书展 示 容 策 -一 > 


1. 
2. <Vlewclass = “ book — container'> 
3 了 3. 


<! 一 一 图书 单 元 区 域 --> 


4. < View Class = 'box' wx:for = '{{bookList}}"' wx:key = 

'book{{index}}'data— id = "' {{item. id}} ' bindtap = 

‘readBook > 

5 <! 一 一 图 书 封面 --> 

6. < image src = '{{item. coverurl}}'></image> 

二 <!- 一 图书 标题 文本 -一 > 

8. < text >{{item.title}}</text > Java 编 程 思 相 计算 机 科学 概论 
9. </view> 


10. </view> 


此 时 重新 运行 , 图书 列 表 成 功 读 取 到 ,如 图 18-4 


18.2.2 点 击 跳 转 图 书 详情 页 


创建 页 面 intro, 用 于 显示 图 书 详 情 。 
然后 在 index. wxml 页 面 修改 点 击 事件 : + Mr 
视频 讲解 


<!-- 图 书展 示 容 器 --> 


< Vliew class = 'book 一 container'> 


1 
2 
3. <! 一 -图书 单元 区 域 --> 图 18-4 ”图 书 封面 展示 效果 图 
4 


< View class = 'box' wx:for = '{{bookList}}' wx:key = 


'book{{index}}' data— id= '{{item. id}}' bindtap = "showBookIntro '> 
<!-- 图 书 封面 -一 > 


2 

6. < image src = '{{item. coverurl}}'></image > 
rR <! 一 一 图书 标题 文本 -一 > 

8 < text >{{itenm.title}}</text > 

9 </view> 

10. </view> 


接 下 来 在 index. js 文件 中 添加 目 定 义 函 数 showBookIntro: 


/ 
* 目 定 义 困 数 -- 显示 图 书 详情 
关 1 

showBookIntro: function(e) { 
// 获 取 图 书 ID 编号 


let 1d = e.currentTarget. dataset. 1d 


wx. navigateTol( { 
url: '../intro/intro?id= ' + id, 


}) 


iD 区 本 捕 


18.3.1 页 面 设计 
首先 将 index. wxml 里 面 的 绽 层 代码 前 切 、 烙 贴 过 来 使 用 .: 
<! 一 一 下 载 时 的 蒙 层 --> 


1. 

2. <Vliew class= 'loading ~ container' wx:if = '{{isDownloading}}'> 

3 < text > 下 载 中 ,请 稍 候 </text > 

4. < progress percent = " {{percentNum}}" stroke — width = " 6" activeColor = " # 663366" 
backgroundColor = " # FFFFFF" show— info active active ~ mode = "forwards"></progress > 

5. </view> 


将 index. js 文件 中 data 里 面 的 初 妈 数 据 剪 切 、 烙 贴 到 当前 intro. js 文件 的 data 中 : 


/ x 
* 页 面 的 初始 数据 
*/ 
data: 1 
isDownloading: false, 
percentNum: 0 
1, 


同样 将 index. wxss 文件 中 关于 蒙 层 的 样式 代码 剪 切 .粘贴 到 当前 intro. wxss 文件 中 : 


1. /x* 下 载 时 的 壹 层 容 毅 样式 */ 

2 .loading — container { 

3 height: 100vh:; /¥* 高 度 x*/ 

4. background ~ color: silver; /* 痛 景 糊 色 */ 

5 display: flex; /* flex 模型 布局 */ 
6 flex— direction: column; / 关 水 平 排列 < / 


7. align— items: center; /水 平方 器 居中 */ 
8. justify — content: space — around ; / x 分 散布 局 */ 

9. |} 

10. /x* 进度 条 样式 x*/ 

11. progresst 

12. width: 80%; /x 宽度 */ 

13. } 


然后 在 intro. wxml 中 追加 当前 页 面 的 图 书 详情 显示 : 
1. <! 一 下 载 时 的 蒙 层 (代码 略 ) -一 > 

2. 

3. <!-- 图 书 详情 --> 


4. 之 view class = 'intro- container' wx:else> 

5. <!-- 图 书 封面 图 片 -- > 

6. < image src= '{{book. coverurl}}' mode = 'widthFix'></image > 
<!-- 图 书信 息 介 绍 --> 

8. < view class = 'intro- box'> 


9. < text > 书 名 : {{book.title}}</text > 
10. < text > 人 作者: { {book. author}}</text > 
11. <text > 价格 : { {book. price}}</text > 
I < text > ISBN: {{book. isbn}}</text > 


13. </view> 

14. ”<!-- “开始 阅读 ”按钮 --> 

15. 所 button type = 'warn' bindtap = 'readBook'> 开 始 阅 讨 </button > 
16. </view> 


对 应 的 intro. wxss 代码 如 下 : 
/x 图 书 详细 信息 区 域 * / 


. intro— containert{ 
height: 100vh; 
display: flex; 


align— items: center; 
Justify— content: space 一 evenly; 
} 
/* 图 书 封 面 图 片 */ 
10. .intro— container imagel 
11. width: 400rpx; 
12. margin: 20rpx; 
13. } 
14. /* 图 书信 息 区 域 */ 
15. .intro— boxt{ 
16. display: flex; 


1 
2 
3 
4 
5. flex— direction: column; 
6 
7 
8 
9 


17; flex— direction: column; 
18. } 

19. /* 图 书 文字 信息 */ 

20. .intro— box text{ 

21. margin: 20rpx; 

22. |] 


此 时 页 面 设 计 就 全 部 完成 。 


18.3.2 页 面 罗 得 
修改 intro. js 文件 ,在 其 顶部 添加 如 下 代码 
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1. const db = wx.cloud. databasel ) 
2. const books = db. collection( 'books') 


然后 修改 intro. js 中 的 onLoad 图 数 : 


1 /x 

2. * 生命 周期 冰 数 -监听 页 面 加 载 

二 * 

4. onLoad: function(options) { 

= 生 books. doc( options. id).get({ 

6. success:res= >1{ 

7. this. setDatal {book: res. data} ) 

8. } 

9. }) 

10. 本 书 名 ; Java 编 程 思想 


上 述 代码 表示 根据 页 面 跳 转 过 来 时 所 携带 的 图 书 ID 作用 raga Fe 
查找 云 数据 集 books 中 该 图 书 的 相关 信息 。 此 时 重新 运 价格 :120 
行 , 图 书 内 容 成 功 读 取 到 ,如 图 18-5 所 示 。 ISBN : 未 知 

由 该 图 可 见 查询 成 功 , 图 书信 息 会 
据 开 发 者 上 传 的 数据 的 不 同 显示 实际 值 。 


18.3.3 阅读 图 书 功 能 


修改 intro. js 代码, 将 原先 在 index. js 饮 频 讲 解 
中 的 几 个 函数 剪 切 、 粘 贴 过 来 ,函数 的 具体 内 容 略 ， 


图 18-5 查询 图 书 详情 页 


1. /xx 

2. < 打开 图 书 

X / 

4. openBook: function(path) {代码 略 }， 
5. 

6. /xx 

7. 过 保存 图 书 

8. x/ 

9 . saveBook: function( id，path) {代码 略 }， 
10. 

11. /xx 

12. * 阅读 图 书 

本 关 1 

14. readBook: function(e) {代码 略 }， 
135. 

16. /xx 

Ls x 封 竣 showModal 方法 

18. wi 


19. showTips: function(content) { 代 但 略 }， 


然后 修改 其 中 的 readBook 函数 : 


/xx 
x 阅读 图 书 
*/ 


readBook : function( e) { 
Var that = this 


tn 


// 获 取 当 前 点 击 的 图 书 的 ID 


6 

了 。 let id = this. data. book. id 

8. // 查 看 本 地 缓存 

9 . let path = wx. getStorageSync( 1d) 
10. // 未 曾 下 载 过 


11. if (path == '') { 

i // 切 换 到 下 载 时 的 壹 层 

13. this. setDatal { 

14. lsDownloading: true 

二 }) 

16. 

17. // 获 取 当前 点 击 的 图 书 的 URL 地 址 
18. let fileid = this. data. book. fileid 
19. 

20. const downloadTask = wx.cloud. downloadFile(f{ 
21. fileID:fileid, 

二 success:res = >{ 

改作 // 下 载 成 功 

24. if (res. statusCode == 200) { 
25. // 获 取 地 址 

26. path = res.tempFilePath 

27. // 保 存 并 打开 图 书 

28. this. saveBook( id, path) 

29. } 

30. // 连 上 了 服务 毅 , 下载 失 败 

31. else { 

32. this. showTips( ' 暂 时 无 法 下 载 ! ') 
从 介 } 

34. },fail:err =>1{ 

35. this. showTips( ' 无 法 连接 到 服务 需 !) 
36. 上 complete: res = >{ 

37. // 关 闭 下载 时 的 蒙 层 

38. this. setDatal { 

39. lsDownloading: false 

40. }) 

41. } 

42. }) 

43. 

44. // 监 听 当 前 文件 的 下 载 进度 

45. downloadTask. onProgressUpdate(function(res) { 
46. let progress = res. progress; 

47. that. setDatal { 

48. percentNum: progress 

49. }) 

50. }) 

51. } 

52. // 之 前 下 载 过 的 ,直接 打开 

53. else { 

54. // 打 开 图 书 

55. this. openBook( path) 

56. } 

21. }， 


此 时 点 击 按钮 会 检测 当前 这 本 图 书 是 否 已 经 下 载 过 了 ,如 果 已 经 下 载 过 了 , 则 直接 打 开 阅 
读 ; 如 果 没 有 下 载 过 , 则 显示 下 载 进度 条 蒙 层 进行 下 载 。 
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运行 效果 如 图 18-6 上 扎 


重重 帮 重生 We Rat 二 年 证 剖面 二 ke het 


< 


< 


Java 纺 程 央 析 ! 
a 


sl 


书 名 : Java 蝙 程 思想 
作者 : ( 美 )Bruce Eckel 
价格 : 99 元 

ISBN : 1234 


开始 阅读 


(a) BB 幸 情 页 (b) 正在 下 载 电 广 B 


wx19079110a0f01e8a.o6zA] s2XMBelG U- PqXMDukvil68c PoYHeZc7PpOe03aac8f1f7 1d203989be06b7ee2ff2. pdf - Adobe Acrobat Reader DC 
| 文件 旧 ” 闹 日 日 ”视图 音 DGW 帮助 {| 

主页 ”工具 wx19079110a0f01... * 

| 

| 


全 四 乌 


加 导出 PDF 


Adobe Acrobat Pro DC 人 


| | 广 不 : Jb Wy 将 PDF 文件 联机 转 换 为 Word 


( 美 ) Bruce Eckel 著 陈 里 网 译  ， 区 el 建 PDF 


pr 上 编辑 PDF 
Linkinta in EE 


注释 
时 ri 


在 Doecument Cloud 中 存 眩 和 六 享 
变 忻 


了 馆 更 全 信息 


(©) 在 计算 机 疹 打 开 已 下 载 的 电子 书 效果 
图 18-6 图 书 下 载 过 程 示 意图 
由 图 可 见 , 所 选择 的 电子 书 已 经 从 云 存 储 空 间 中 下 载 到 本 地 。 用 户 要 注意 小 程序 只 人 允许 
下 载 、 保 存 10MB 以 内 大 小 的 文件 ,必要 时 可 以 在 微 信 web 开发 者 工具 中 清除 文件 缓存 。 
此 时 基于 云 存 储 的 电子 书 橱 项 目 就 全 部 改造 完毕 了 。 


18. 


15. 


4.1 应 用 文件 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


1. 1 
2 “pages : [ 
3. "pages/ index/ index", 
4 . "pages/ intro/intro" 
2 ]， 
6. "window : { 
7. "navigationBarBackgroundColor": "#663366", 
8. "navigationBarTitleText" : "我 的 书 橱 " 
9 . } 
10. } 
. 一 ~ 
4.2 页 面 文件 代码 展示 


首页 代码 展示 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


<!-- 图 书展 示 容 器 -一 > 
< Vliew Class = 'book— container'> 


1 
- 
3. <! 一 一 图书 单元 区 域 -一 > 
4 


< view Class = 'box' wx:for = '{{bookList}}' wx:key = 'book{{index}}' data ~ id= '{{item. id 


bindtap = 'showBookIntro'> 
<!-- 图书 封 面 -一 > 


<! 一 一 图书 标题 文本 -一 > 

< text >{{item.title}}</text > 
</ view> 
10. </view> 


iD 0 ~] SG Cn 


< image src = '{{item. coverurl}}'></image > 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


1. /+* 图 书展 示 容 般 梓 陈 关 / 
2. .book— container { 

Ss display: flex; 

4. flex— direction: row; 

Ds flex— wrap: wrap; 

6. |} 

7. /x* 图 书 单元 区 域 样式 */ 
8. .box { 

9. width: SO%.; 

10. height: 400rpx.; 

11, display: flex; 

12. flex— direction: column; 
了 align— items: CenteTr ; 

1 4， Justify ~ content: Space 一 around ; 
ES 

16. /* 图 书 封 面 图片 样 式 * / 


/ * flex 模型 布局 */ 
/x* 水平 排 列 */ 
/* 允许 换行 * / 


/* 览 度 */ 

/* 高 度 */ 

/ x* flex 模型 布局 * / 
/xx 垂直 排 列 *V 

/x* 水 平方 向 居中 */ 
/* 分 散布 局 */ 


17. image { 


18. width: 200rpx; /x* 宽度 关 / 

19. height: 300rpx; /x 高 度 x*/ 

20. }]} 

21. /* 图 书 标题 文本 样式 * / 

22. text { 

3 text ~ align: center.; /x* 文本 居中 显示 */ 
24，] 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 


1 const db = wx.cloud. databasel ) 

2. const books = db.collection( "books ') 
3 

4. Pagel{ 

3, / x 

6 * 页 面 的 初始 数据 

7 关 1/ 

8 data: { 

9. bookList: [|] 

10. 要 

11. /xx 

1 x 目 定 义 函 数 -- 跳 转 图 书 详情 页 面 
13. */ 

14. showBookIntro: function(e) { 

1, let id = e.currentTarget. dataset. 1d 
16. wxX. navigateTo( { 

17. url: '../intro/intro?id=" + id 
18. }) 

19. } 

20. /xx 

21. * 生命 周期 商 数 -一 监听 页 面 加 载 
22. x / 


23. onLoad: function(options) { 


24. // 获 取 图 书 列表 


2 books. get({ 

20. success: res => { 

"a //console. log(res. data) 
28. this. setDatal { 

29. bookList: res. data 
30. }) 

31. } 

32. }) 

3 } ， 

34. }) 


图 书 详情 页 代码 展示 
WXML 文件 (pages/intro/intro. wxml) 的 完 


获 代 码 如 下 : 


1 <! 一 一 intro,. wxm| 一 一 > 

2. <! 一 -下载 时 的 蒙 层 --> 

3. <View class= 'loading— container' wx:if = '{{isDownloading}}'> 

4 <text> 下 载 中 ,请 稍 候 </text > 

5 < progress percent = "{{percentNum}}" stroke— width= "6" activeColor = "#663366" 
backgroundColor = " #FFFFFE" show— info active active ~ mode = "forwards"></progress > 

6. </view> 


8. <!-- 图书 详 细 人 信息 -一 > 
9. <view class = 'intro— container' wx:else> 


10. <! 一 一 图书 封面 -一 > 


11. < image src = '{{book. coverurl}}' mode = 'widthFix'></image> 
12. 

13. <! 一 图 书信 息 --> 

14. <View class = "1Intro 一 box'> 

15. < text > 书 名 : {{book. title}}</text > 

16. < text 3 作者 : {{book.author}}</text > 

17. < text > 价格 : {{book. price}}</text > 

18. < text > ISBN: {{book. isbn}}</text > 

19. </view> 

20. 


21. <!-- 开始 阅读 ”按钮 -一 > 
22. <button type = 'warn' bindtap = 'readBook'> 开 始 阅 读 </button > 
23. </view> 


WXSS 文件 (pages/intro/intro. wxss) 的 完整 代码 如 下 、 


1. /x 下载 时 的 去 层 容 兹 样式 * / 

2. .loading— container { 

3 height: 100vh; /x 高度 x*/ 

4. background — color: silver,; /* 背景 灿 色 x* / 

5. display: flex; /* flex 模型 布局 * / 
6 flex— direction: column; /x* 水 平 排 列 * / 

7 align— items: center; /* 水 平方 向 居中 */ 
8 Justify— content: space ~— around; / x 分 散布 局 */ 
De 


10. /x* 进度 条 样式 */ 

11. progresst 

12. width: 80%; /* 宽度 x*/ 
13. } 

14. /* 图 书 详细 信息 区 域 * / 
15. .intro~— container{ 

16. height: 100vh; 

17. display: flex; 

18. flex— direction: column; 
入。 align 一 Items: Center ; 
20. Justify— content: Space ~ evenly; 
21. } 

22. /x* 图 书 封面 图 片 * / 

23. .intro~ container imagel 
24. width: 400rpx; 

-AF margin: 20rpx; 

26. | 

27. /x* 图 书信 息 区 域 * / 

28. .intro— boxt{ 

29. display: flex; 

30. flex— direction: column; 
31. } 

32. /* 图 书 文字 信息 * / 

33. .intro— box 七 ext{ 

34. margin: 20rpx; 

35. |} 


JS 文件 (pages/intro/intro. js) 的 完整 代码 如 下 ， 


1 
2 
3 
4 
i 
6 
7 
8 
9 


const db = wx.cloud. databasel ) 
const books = db. collection( 'books') 


Pagel { 


/ x 
*x 页 面 的 初始 数据 
x/ 
data: { 
isDownloading: false, 
percentNum: 0 
}, 
/ 尖 尖 
x 打开 图 书 
x 
openBook: function(path) { 
wx. openDocument ( { 
filePath: path, 
success: function(res) { 
console. log( ' 打 开 图 书 成 功 ') 
}, 
fail: function(error) { 
console. log(error); 


saveBook: function(id, path) { 
var that = this 
wx. SaveFilel { 
tempFilePath: path, 
success: function(res) { 


// 将 文件 地 址 存 到 本 地 缓存 中 ,下 次 直接 打开 


let newPath = res. savedFilePath 
wx. setStorageSync( id, newPath) 
// 打 开 图 书 
that. openBook( newPath) 

}, 

fail: function(error) { 


console. l0g(error) 


that. showTips(' 文 件 保 存 失 败 !') 


}) 
}, 
/ 尖 关 
* 阅读 图 书 
x/ 
readBook: function(e) { 
var that = this 
// 获 取 当 前 图 书 ID 
let 1d = this. data. book. id 
// 获 取 当 前 图 书 云端 地 址 
let fileid = this. data. book. fileid 


// 查 看 本 地 绥 存 
let path = wx. getSstorageSync(1d) 
// 未 曾 下 载 过 
if (path == ') { 
// 切 换 到 下 载 时 的 蒙 层 
that. setDatal { 
i1sDownloading: true 
}) 
// 先 从 云端 下 载 图 书 
const downloadTask = wx.cloud.downloadFilel({ 
fileID: fileid, 
success:res = >f{ 
// 关 闭 下 载 时 的 蒙 层 
this. setDatal { 
lsDownloading: false 
jy 
// 下 载 成 功 
if (res. statusCode == 200) { 
// 获取 地 址 
path = res.tempFilePath 
// 保 存 并 打开 图 书 
this. saveBook( id, path) 
} 
// 连 上 了 服务 硕 , 下 载 失 败 
else { 
this. showTips( ' 和 暂时 无 法 下 载 ! 7) 
} 


}, 
// 请 求 失败 
fail:err=> 1 
// 关 闭 下 载 时 的 蒙 层 
this. setDatal { 
lsDownloading: false 
}) 
this. showTips( ' 无 法 连接 到 服务 般 !) 
} 
}) 


// 监 听 当 前 文件 的 下 载 进度 
downloadTask. onProgressUpdate(function(res) { 
let progress = res. progress; 
that. setDatal { 
percentNum: progress 
}) 
}) 
} 
// 之 前 下 载 过 的 ,直接 打开 
else |{ 
// 打 开 图 书 
that. openBook( path) 
} 
}, 


/ 尖 基 


< 封装 showModal 方法 
关 
showTips: function(content) { 
wx. ShowModal( { 
title: ' 提 醒 '， 
content: content, 
showCancel: false 
}) 
}, 


/ x 
* 生命 周期 消 数 -监听 页 面 加 载 
x 


onLoad: function(options) { 


// 获 取 当 前 图 书信 息 
books. doc (options. id). get({ 
success: res => { 
this. setDatal { 
book: res. data 
}) 


小 程 夺 云 开 尺 * 基于 全 套 云 能 力 
的 图 片 分 对 社区 


在 学 习 了 小 程序 云 开发 的 基础 知识 后 ,读者 不 妨 尝 试 综合 应 用 云 数据 库 、 云 函数 和 云 存 储 
制作 一 球 图 片 分 享 社区 小 程序 。 用 户 可 以 上 传 图 片 到 云 存储 空间 中 ,也 可 以 查看 其 他 用 户 上 
a 下 载 和 全 屏 预览 等 。 


。 综合 应 用 小 程序 云 开 发 的 基础 知识 创建 图 片 分 享 社区 小 程序 ; 
。 掌握 云 数 据 集 创建 、 云 存储 管理 和 云 函 数 调 用 等 知识 。 


创建 云 模板 项 目 


首先 需要 创建 一 个 云 开 发 项 目 ,在 任意 盘 符 下 创建 一 个 空白 文件 夹 ( 例 如 回 
cloudPhoto) ,然后 填 入 AppID 和 选中 “小 程序 ， 云 开发 ”, 如 图 19-1 所 示 。 

接着 删除 其 中 无 用 的 模板 代码 : 

(1) 删除 cloudFunctions 文件 夹 下 的 默认 云图 数 login 的 全 部 内 容 。 

(2) 找到 app. json 文件 ,打开 并 删除 其 中 的 页 面 引用 ,只 保留 第 一 个 pages/index/index。 

(3) 打开 便 盘 中 的 pages 文件 夹 ,删除 index 以 外 的 所 有 目录 。 

(4) 进入 index 文件 夹 , 删 除 多 余 的 图 片 ,以 及 JS、WXML 和 WXSS 文件 中 的 全 部 代码 
(JS 文件 删除 干净 后 输入 关键 词 page 让 它 自 动 生成 Page({ 入 因数 的 相关 代码 )。 

(5) 删除 app. wxss 中 的 代码 。 

(6) 删除 image 文件 夹 中 的 所 有 图 卢 。 

(7) 删除 style 文件 夹 , 此 时 项 目 清理 全 部 完成 。 


19.1.2 部 署 云 数据 库 


具体 操作 如 下 : 
(1) 打开 云 开发 控制 台 , 创 建 一 个 新 的 数据 集 , 例 如 photos。 ei 
(2) 检查 photos 数据 集 的 权限 ,确认 是 “所 有 用 户 可 读 , 仅 创建 者 及 管理 


19.1.1 


ET 全 导入 项 目 


tloudPhoto 


E:Wxdemo_ WorkspacewloudPhoto 


WwWx19079110a0 和 Te8a 


车 无 ApplD 可 注册 
或 使 用 测试 号 
小 程序 
' | 不 使 用 云 服 务 
加 小 程序 云 开发 
建 服务 器 ， 使 用 平台 提供 的 API 进行 核心 业务 开发 ， 
迁 代 。 了 解 详情 


图 19-1 云 模板 项 目 填 写 效 果 示 意图 


效 来 如 图 19-2 所 示 。 


counters 
ry bok 适 帆 场 县 ; 用 户 个 人 设置 周 户 订单 管理 等 


所 有 了 用户 可 读 ， 仅 管理 只 可 写 
适用 场 叶 : 商品 信息 等 


| 仅 管理 员 可 读 写 


适用 场景 : 后 睛 泡 水 各 撕 等 


News 


Pd 全 


stunhent 


US 人 


十 9 谢 讯 云 TCS 进 供 存 杜 巩 计 站 最 和 


19-2 ”在 云 开 发 控制 台 添 加 数据 集 photos 并 设置 权限 


19.1.3 创建 页 面 文件 


本 项 目 有 4 个 页 面 文件 ,分 别 是 index( 首 页 )、homepage( 个 人 主页 )、 
detail( 图 片 展示 页 ) 和 add( 上 传 图 片 页 )。 打 开 app. json 文件 ,在 pages 属性 
中 人 奶 加 除 index 之 外 的 其 他 页 面 的 路 径 摘 述 ,如 几 19-3 所 示 。 


EE 


他 DD 第 19 章 小 程序 云 开发 - 基于 全 套 云 能 力 的 


上 片 分 享 社区 必 


保存 后 会 上 月 动 生成 后 面 3 个 页 面 ,此 时 pages 文件 夹 内 部 的 目录 结构 如 图 19-4 所 示 。 
此 时 文件 配置 就 全 部 完成 ,19.2 世 将 正式 进行 页 面 布 局 和 样式 设计 。 


” 加 pages 
” [SS add 
9 add.s 
{} add.json 


< addwxml 


wis Ud. SS 
下 ES detall 
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{} detailjson 
< > detail.wxml 
wss detailWxss 
" [homepage 
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三 
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]， 
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图 19-3 在 app.json 中 添加 页 面 配置 的 代码 19-4 页面 文 件 创建 完成 


导航 栏 设计 
用 户 可 以 通过 在 app. json 中 对 window 属性 进行 重新 配置 来 自 定义 导航 
柱 效 果 。 
更改 后 的 app. json 文件 代码 如 下 : 


19.2.1 


1. 1{ 

2. "pages" : [代码 略 ]， 

x 坟 "Window : { 

4. "navigationBarBackgroundColor”: " # F6F6F6", 
5 "navigationBarTitleText": "图 片 分 享 社区 "， 
6. “navigationBarTextStyle : “black 

了 } 

8. } 


上 述 代 码 可 以 更 改 导 航 栏 背景 色 为 浅 灰 色 、 字 体 为 黑 
色 , 效 果 如 图 19-5 所 示 。 


19.2.2 页 面 设计 


下 页 设计 
自 页 主要 是 图 片 展 示 区 域 ,用 于 展示 多 名 作者 上 传 的 图 上 刻 作品 。 每 张 图 


片 都 以 卡片 的 形式 出 现 , 卡 片 包括 页 眉 .主体 和 页 脚 部 分 。 除 此 之 外 还 需要 在 右上 角 放 置 一 个 
浮动 按钮 ,点 击 此 按钮 可 以 上 传 图 片 到 云 存 储 空间 ， 
页 面 设计 如 图 19-6 所 示 。 

计划 使 用 如 下 组 件 。 


app. 


整体 容器 : 容器 组 件 (< view >), 并 定义 class 二 
'contaimner'; 

整 张 卡片; 容 胡 组 件 (< view >) ,并 定义 class 一 'card '; 
卡片 页 眉 、 主 体 和 页 脚 : 容器 组 件 (< view >) ,并 分 别 
定义 class 王 'card-head'、card-body' 和 "card-foot '; 
作者 头像 图 标 和 上 传 的 图 片 : 图 片 组 件 (< Image >) ; 
作者 昵称 所 在 地 以 及 图 中 上 传 时 间 : 文本 组 件 
(< text >) ; 


浮动 按钮 : 按钮 组 件 (< button >) 。 


WXML(pages/index/index. wxml) 代 码 如 下 : 


iD 50 


人 
(no 


16. 


< Vlew Class = 'container'> 
<! 一 一 卡片 -一 > 
< Vlew Class= Card > 
<! 一 卡片 页 由 一 -> 


<Vlew Class = 'card 一 head'> 


卡片 页 局 | 上 上 


卡片 页 股 
(图 片上 传 日 期 ) 


月 页 寺 
(头像 、 昵 称 、 所 在 地 ) 


卡片 页 脚 
(图 片上 传 日 期 ) 


图 19-6 ”首页 设计 图 


< image class = 'avatar' src = '/ images/avatar, Jpg' mode = 'widthFix'></image > 


< Vlew Class= 'title'> 
<text class = 'nickName> 周 小 几 </text > 
< text class = 'address'> Anhui, China </text > 
</view > 
</view > 


<!-- 卡片 主体 一 > 


<Vlew class= 'card— body'> 


< image src = '/images/pic001. jpg' mode = 'widthFix'></image > 


</view> 


<!-- 卡片 页 脚 -一 > 
< VIew class= 'card— foot > 
< text > 2019 — 06 - 21 </text > 
</view> 
</view> 


, </view> 


.<!--“ 上 传 图 片 ? 按 钮 -~-> 
. <Vlew class = 于]oatBtn > 
< button size = 'mini' type = 'primary'> 上 传 图 片 </button > 
. </view> 


由 于 整体 容 需 ,卡片 样式 也 会 在 其 他 页 面 使 用 ,所 以 将 这 两 部 分 样式 代码 写 到 公共 样式 表 


wxss 中 ,具体 代码 如 下 : 

1. /x*1. 整 体 容器 样式 x*/ 

2 .Container { 

BS display: flex; 

4 flex— direction: column; 


可 align ~ Items : center; 

6 background — color: whitesmoke; 
了 min— height: 100vh; 

8. | 

9. /x2. 卡 片区 域 整体 样式 */ 

10. .card { 


11. width: 710rpx; 

12; border - radius: 20rpx; 

| background ~— color: white; 
14. margin: 20rpx 0; 

15. |} 

16. /x*2-1 卡 片 页 眉 <V/ 

17. .card— head |{ 

18. display: flex; 

1 flex— direction: row; 

20. align ~ items: center; 


23. /x*2 一 1 一 1 头像 图 片 */ 
24. .avatar { 

了 5 。 width: 150rpx; 

20 . border — radius: 50 委 ; 
eT margin: 0 20rpx; 


30. /Vx*2-1-2 文 字 信 息 */V/ 
31. .title { 

32. display: flex; 

33. flex— direction: column; 
34. | 

35. Vx*2-1-2(1) 昵称 x/ 
36. .nickName { 

37. font 一 size: 35rpx; 
38. margin: 0 10rpx; 

39. } 

40. Vx*2-1-2(2) 所 在 地 区 */ 
41. .address { 

42. font 一 size: 30rpx; 
43. color: graV; 

44. margin: 0 10rpx; 

45. | 

46. /x*2 一 2 卡片 主体 x*/ 
47. .card— body image { 

48. width: 100%.; 

49. } 

50. /x*2 一 3 卡片 页 脚 */ 
51. .card— foot{ 

52., font 一 size: 35rpx; 
53. text 一 align: right; 
54. margin: 20rpx; 

5 .4 


浮动 按钮 是 首页 特有 的 ,因此 将 相关 样式 代码 写 到 首页 对 应 的 index. wxss 文件 中 即 可 。 
WXSS(pages/index/index. wxss) 代 码 如 下 : 


/* 浮 动 按 钮 样式 */ 
.floatBtn{ 


position: fixed; 


1 

2 

3 

4. top: SOrpx; 
5 right: 50rpx; 
6 


} 


上 述 代 码 表示 无 论 首 页 如 何 下拉 滚 动 ,浮动 按钮 都 永远 固定 在 距离 顶端 和 右边 50rpx 的 
位 置 上 不 变 。 当 前 效果 如 图 19-7 所 示 。 

需要 注意 的 是 ,这 里 所 展示 的 头像 .上 昵称、 所在地、 图 片 和 上 传 日 期 都 是 为 了 演示 效果 临时 
填写 的 ,后 续 会 换 成 实际 录入 的 信息 ,并 形成 卡片 列表 效果 ， 

个 人 主页 设计 

个 人 主页 除了 顶部 会 显示 当前 作者 的 头像 .昵称 外 ,下 方 仍 然 是 和 首页 一 
样 布局 的 图 片 展示 区 域 , 仅 限 于 展示 当前 作者 上 传 的 图 片 作 品 。 

页 面 设计 如 图 19-8 所 示 。 


头像 图 片 
OCSA 主 页 


卡片 页 
(头像 、 昵 称 、 所 在 地 》 


上 有 请 页 局 
卡片 主体 
2019-06-21 (图片) 
卡片 页 脚 
《图 片上 传 日 期 ) 


卡片 页 局 
《头像 、 上 昵称、 所 在 地 ， 


卡片 主体 
“图片 》 


卡片 页 脚 
(图 片上 传 日 期 ) 
图 19-7 首页 效果 图 图 19-8 个 人 主页 设计 图 
计划 使 用 如 下 组 件 。 


。 整体 容 需 : 容 需 组 件 (< view >) ,并 定义 class 一 'container '; 

。 顶端 头像 和 昵称 区 域 : 容器 组 件 (< view >) ,并 定义 class 二 'avatarBox'; 

。 整 张 卡 厂 : 容 责 组 件 (< view >), 并 定义 class 王 'card'; 

。 卡片 页 眉 .主体 和 页 脚 ， 容器 组 件 (< view >) ,并 分 别 定 义 class 二 'card-head'、'card- 
body' 和 "card-foot '; 

。 作者 头像 图 标 和 上 传 的 图 片 : 图 片 组 件 (< image >); 

。 作者 昵称 和 上 传 时 间 : 文本 组 件 (< text >) 。 

WXML(pages/homepage/homepage. wxml) 代 码 如 下 : 


<Vlew Class= ‘container'> 
<!-- 头像 和 昵称 --> 
<Vlew Class= “avVatarBox > 
< image src = '/images/avatar. jpg'></image > 
< text> 周 小 由 个 人 主页 </text > 


1. 
2. 
: 
4. 
6b. 
了 
8 . 
9 . 


</ Tiew> 
<! 一 一 卡片 -一 > 
<Vlew Class= Card > 
10. <!-- 卡片 页 眉 --> 
11. <Vliew class= ‘card— head'> 
12. < image class = 'avatar' src = '/images/avatar. jpg' mode = 'widthFix'></image> 
1 < VlIew class= 'title'> 
14. <text class = 'nickName'> 周 小 由 </text > 
4 < text class = 'address'> Mnhui, China </text > 
16. </View> 
17. </ View> 
18. 
19. <!-- 卡片 主体 --> 
1 <Vlew class= ‘card— body > 
21. < image src = '/images/pic01. jpg' mode = 'widthFix'></image > 
+ 四 </view> 
23. 
24. <!-- 卡片 页 脚 --> 
95. <View class= card 一 foot > 
26. < text > 2019 - 06 — 21 </text > 
27. </ View> 
28. </view > 
29. </view> 


整体 容 锅 和 卡片 的 样式 代码 与 首页 相同 ,可 以 自动 继承 于 公共 样式 表 app. wxss, 无 须 重 
复 声 明 ,而 顶部 头像 和 昵称 的 相关 样式 写 到 对 应 的 homepage. wxss 中 即 可 。 
WXSS(pages/homepage/homepage. wxss) 代 码 如 下 : 


1. /x 头像 区 域 */ 

2. .avatarBox{ 

可 display: flex; 

4. flex— direction: column; 
= align ~ items: center; 

6. padding — top: 100rpx; 

7. |} 

8. /x 头像 区 域 中 的 头像 图 片 */ 
9 . 


.avatarBox imaget 

10. width: 200rpx; 

11. height: 200rpx; 

12. border — radius: 50$%; 

13. } 

14. /* 藉 像 区 域 中 的 昵称 文本 */ 
15. .avatarBox text!{ 

16. margin: 30rpx 0; 

17. } 


当前 效 末 如 图 19-9 所 示 。 
同样 这 里 所 展示 的 头像 昵称、 图 片 以 及 上 传 日 期 都 是 为 了 演示 效果 临时 填写 的 ,后 续 会 
换 成 实际 录入 的 信息 ,并 形成 卡片 列表 效果 。 


图 片 展示 页 设计 

当 用 户 点 击 卡片 主体 中 的 图 片 时 会 跳 转 到 图 片 展 示 页 查看 完整 图 片 效 
琳 ,该 页 面 主 要 包含 完整 图 片 和 3 个 按钮 ,按钮 分 别 用 于 下 载 图 片 、. 分享 给 好 
友 以 及 全 屏 预览 图 片 。 

页 面 设计 如 图 19-10 所 示 。 


周 小 贝 个 人 主页 


中” 周 小 贝 
吉 Anhui,China 


“下 载 到 本 地 ”按钮 


éE 分 享 给 好 友 oe 按 | 


“全 屏 预 页 ” 按 裙 


2019-06-21 


19-9 个 人 主页 效果 图 19-10 图片 展示 页 设计 图 
计划 使 用 如 下 组 件 。 


。 顶端 图 片 展示 : 图 片 组 件 (< image >); 

。 按钮 区 域 : 容 带 组 件 (< view >); 

*。 3 个 按钮 : 按钮 组 件 (< button >) 。 

WXML 文件 (pages/detail/ detail. wxml) 代 码 如 下 : 


<! 一 一 顶端 图 片 展示 -一 > 

< image src = '/images/pic01. jpg' mode = 'widthFix'></image > 
<!-- 按钮 区 域 -一 > 

< TIeW > 


< button type = 'primary' plain > 下载 到 本 地 </button > 

< button type = 'primary' plain > 分 享 给 好 友 </button > 

< button type = 'primary' plain> 人 全屏 预 览 </button > 
</view > 


iD 0 


WXSS(pages/detail/ detail. wxss) 代 码 如 下 ， 


1. /x 顶端 展示 图 片 样式 */ 
2. imagel 

EE width: 750rpx; 

4. |} 

5 


6. /x* 按钮 外 层 viewx / 
7. viewl{ 
8 padding: 0 50rpx; 


9 


11. /x* 按钮 样式 */ 

12. buttont{ 

13. margin: 10rpx; 

14. | 

当前 效 末 如 图 19-11 所 示 。 

这 里 的 图 片 路 径 是 为 了 演示 效果 临时 十 与 的 ,后 续 会 换 成 实际 震 要 展示 
的 图 族 。 

上 传 图 片 页 设计 

点 击 首 页 中 的 “上 传 图 片 ” 按 钮 可 以 跳 转 到 上 传 图 片 页 ,该 页 面 主要 包含 
按钮 .标题 和 九宫 格 图 片 。 页 面 设计 如 图 19-12 所 示 。 


“点 击 此 处 上 传 图 片 ”按钮 


标题 ; 已 上 传 图 片 历史 记录 


分 享 给 好 友 \ 


19-11 图 片 展示 页 效果 图 19-12 上传 图 片 页 设计 图 
计划 使 用 如 下 组 件 。 


。 整体 容器 : 容 需 组 件 (< view >) ,并 定义 class 二 'container'; 
*。 按钮 : 按钮 组 件 (< button >) ; 
。 标题 : 文本 组 件 (< text >) - 
。 九宫 格 图 片 展示 ; 网 片 组 件 (< image >) 。 
WXML 文件 (pages/add/add. wxml) 代 码 如 下 : 
< Vlew Class= 'container'> 


1 
2、， < 上- “点击 此 处 上 传 图 片 ”按钮 -> 
3. ”<button type = 'warn'> 点 击 此 处 上 传 图 片 </button> 
4. 


jpg'></ image > 
jpg'></ image > 
jpg'></ image > 
jpg'></ image > 
jpg'></ image > 
jpg'></ image > 


5 <! 一 一 已 上 传 图 片区 域 -一 > 

6 . < VIew class = “PhotoBox > 

7 <! 一 一 标题 -一 > 

8. < text > 已 上 传 图 片 历 史记 录 </text > 
9. 

10. <!- 一 图 上 乒 集 --> 

11. < Vlew> 

12. < image src = '/ images/pic01. 
13. < image src = '/ images/Vpic01. 
14. < image src = '/ images/pic01. 
15. < image src = '/images/pic01. 
16. < image src = '/ images/Vpic01. 
17. < image src = '/ images/pic01. 
18. </view> 

19. </view> 


20. </view> 


整体 容 需 的 样式 代码 大 部 分 与 首页 相同 ,可 以 目 动 继承 于 公共 样式 表 app. wxss, 无 
复 声 明 。 在 对 应 的 add. wxss 文件 中 还 可 以 追加 其 他 样式 代码 。 


WXSS(pages/add/add. wxss) 代 码 如 下 : 


1. /x* 已 上 传 图 片区 域 */ 

2. .photoBox{ 

有 margin ~ top: S50rpx; 

4. display: flex; 

he flex— direction: column; 
6. |} 

7 /* 标题 样式 * / 

8. .photoBox text1{ 

9 margin— bottom: 30rpx; 


10. text 一 alLign: center; 
11. } 

12. /x* 图 片 样式 */ 

13. .photoBox imagel 

14. float: left; 

15. width: 250rpx; 

16. height: 250rpx; 

17. | 


当前 效果 如 图 19-13 所 示 。 


为 了 体现 多 张 图 片 设 计 效 果 , 这 里 重复 了 6 次 < image > 
组 件 的 相关 代码 , 仅 作 为 临时 参考 。 后 续 将 读 取 用 户 真 实 


上 传 的 图 片 数 量 ,展示 历史 记录 。 


此 时 页 面 布局 与 样式 设计 驶 已 完成 ,19. 3 世 将 介绍 如 


何 进行 逻辑 处 理 。 


19.3.1 用 户 个 人 信息 获取 逆 辑 


在 首页 中 点 击 * 上 传 图 片 ” 按 钮 时 需要 实现 两 个 功能 ,一 是 获取 当前 用 户 个 人 信息 (包括 基 


础 信息 和 openid); 二 是 能 够 跳 转 到 上 传 图片 页 ， 


上 传 图 片 页 效果 图 


获取 用 户 基础 信息 

用 户 基 础 信息 主要 包括 用 户 的 微 信 昵称 .头像 .性 别 . 所 在 地 等 内 容 , 为 按 
钮 组 件 (< button >) 添 加 open-type 属性 就 可 以 用 来 获取 这 些 信 息 。 

修改 index. wxml 文件 中 浮动 按钮 的 代码 ,为 其 添加 点 击 后 获取 用 户 个 
人 信息 的 功能 。 

相关 WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 

1. <!-- “上 传 图 片 ” 按 钮 --> 

2. <Vlewclass = ‘floatBtn’'> 

3. < button size= mlnl type= primary open -type= getUserInfo bindgetuserinfo= 

'getUserInfo'> 上 传 图 片 </button > 

4. </view> 
其 中 open-type 的 属性 值 为 固定 写法 ,用 于 表示 按钮 的 特殊 用 法 类 型 ; bindgetuserinfo 的 属性 
值 为 自 定义 函数 ,用 于 获取 到 用 户 信 息 后 的 进一步 处 理 , 开 发 者 也 可 以 更 改 为 其 他 名 称 。 

在 JS 文件 中 添加 月 定义 困 数 getUserInfo, 相 关 JS(pages/index/index. js) 代 码 厂 段 如 下 : 


1. var app = getApp() 

2 

3. Page({ 

4. / x 

5. * 自 定义 函数 -- 获取 用 户 个 人 信息 

6. */ 

7 getUserInfo: function(e) { 

8. // 坚 试 打印 输出 个 人 信息 ,测试 是 否 获 取 成 功 
9. console. log(e. detail. userInfo) 

10. // 将 用 户 个 人 信息 存放 到 全 局 变量 userInfo 中 
11. app. globalData. userIinfo = e. detail.userInfo 
12. Fy 

13. 月) 


点 击 右 上 角 的 按钮 触发 获取 用 户 信 息 事 件 ,此 时 Console 控制 台 的 运行 效果 如 图 19-14 
所 示 。 


[WR | Console Sources Network Security AppData Audits 


© top v | | Filter Defa 


v {nickNaome: "向 小 扩 E)", gender: 2, Longuage: "zh CN", city: 
avatarUrl: "https://wx.qlogo.cn/mmopen/vi_ 32/08J4Tw6TfT) 
city: "Huhu”™ 
country: "China” 

Bender: 2 
language: "zh _cCN" 
nickName: " 周 小 见 后 " 
province: “Anhui”™ 

bE proto : Object 


图 19-14 ”Console 控制 台 显 示 用 户 基 础 信息 


由 图 可 见 , 点 击 按钮 后 可 以 将 用 户 的 信息 打印 出 来 了 ,说 明 该 功能 生效 。 
此 时 可 以 去 挥 或 者 注释 挥 其 中 的 console. log(e. detail. userInfo) 语 句 , 该 语句 
仅 在 开发 过 程 中 临时 使 用 ,用 于 测试 是 否 获取 到 数据 。 

获取 用 户 openid 信息 

实际 上 每 个 用 户 还 有 一 个 专属 用 户 编号 , 称 为 openid, 该 编号 信息 是 不 会 


改变 的 ,因此 开发 者 可 以 通过 openid 的 值 来 确定 用 户 和 号 份 。 
可 以 通过 自 定 义 云 函数 来 实现 用 户 openid 信息 的 获取 。 对 项 目 中 的 cloudfunctions 三 
击 ,选择 “新 建 Node. js 云 函 数 ”, 然 后 自 定义 云 函数 名 称 ,例如 getOpenid。 
修改 云图 数 中 index. js 文件 的 代码 如 下 : 


1. // 云 国 数 人 口 文件 

2. const cloud = requirel( 'wx- SerVer — sdk') 
3. 

4. cloud. init{) 

2. 

6， // 云 图 数 人 口 困 数 

7. exports.main = async (event, context) => { 
8. const wxContext = cloud. getWXContext( ) 
9. 

10. return { 

11. openid: wxContext.OPENID 

12. 1 

13. 】 


修改 完毕 后 右 击 该 云图 数 ,选择 “上传 并 部 署 : 云端 安装 依赖 ”等 待 上 传 到 云 开发 控制 台 。 


TU 


现在 就 可 以 在 小 程序 中 调用 该 云图 数 获取 当前 用 户 的 openid 信息 了 。 修 改 index. js 中 


2019-03-16 20:31:42 


2019-04-07 14:35: 计 
2019-03-04 15:3727 
2019-02-24 1:50.21 


2019-03-02 16:2927 


坪 | 膀 讯 二 TCB 提 殿 存 鱼 及 计算 服务 


2019-06-21 23:07:17 


2019-04-07 14:42.26 


2019-03-05 15:32:3# 


2019-03-04 15:22.48 


2019-03-02 16:29:32 


每 页 是 下 行 加 


图 19-15 云 开 发 控制 台 显示 云浮 数 信息 


LE 


的 自 定 义 函 数 getUserInfo, 相 关 JS(pages/index/index. js) 代 人 码 片 段 如 下 : 


] 
到 
4 
2 


Pagel 
/xx 

* 目 定 义 藉 数 -- 获取 用 户 个 人 信息 
关 / 


getUserInfo: function(e) { 


6 // 符 试 打印 输出 个 人 信息 ,测试 是 否 获 取 成 功 

7。 / /console. log(e. detail. userInfo) 

8 // 将 用 户 个 人 信息 存放 到 全 局 变量 userInfo 中 

9. app. globalData. userlnfo = e. detail. userInfo 

10. 

11. // 检 测 是 否 已 经 获取 过 了 用 户 openid 信息 

12. if (app. globalData. openid == null) { 

13. // 如 果 是 第 一 次 登录 则 使 用 云浮 数 获 取 用 户 openid 
14. wx. Cloud. cal lFunction( { 

15. name: ‘getOpenid', 

16. complete: res => 1 

17. // 坚 试 打 印 输出 个 人 信息 ,测试 是 否 获取 成 功 
18. console. log(res. result. openid) 

19. // 将 用 户 openid 信息 存放 到 全 局 变量 openid 中 
20. app. globalData. openid = res.result. openid 
21. } 

22. }) 

23. } 

24. }， 

2 上) 


点 击 右 上 角 的 按钮 触发 获取 用 户 信 息 事 件 ,此 时 Console 控制 台 的 运行 效果 如 图 19-16 
所 示 。 


Console Sources Network Security AppData Audits 


T Filter Dn 


OCXAIVAaNC ONS CCASUpeOruNJbwfU 


19-16 ”Console 控制 台 显 示 用 户 openid 信息 


由 该 图 可 见 ,点 击 按钮 后 可 以 将 用 户 的 openid 信息 打印 出 来 了 ,说 明 该 功能 生效 。 此 时 
可 以 去 挥 或 者 注释 挥 其 中 的 console. log(res. result. openid) 语 句 , 该 语句 仪 在 开发 过 程 中 临 
时 使 用 ,用 于 测试 是 否 获 取 到 数据 。 

区 首页 跳 转 上 传 图 片 页 

首页 中 的 “上 传 图 片 ” 按 钮 点 击 后 除了 能 够 获取 用 户 个 人 信息 以 外 ,还 需 
要 跳 转 到 上 传 图 片 页 ,以便 进行 本 地 图 片 的 上 传 。 Si 

修改 index. wxml 文件 中 浮动 按钮 的 代码 ,为 其 添加 自 定义 点 击 事件 回 上 
go ToAdd。 视频 讲解 

相关 WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 

1. <!--“ 上 传 图 片 ”按钮 --> 

2. <vVlew class = 二 LoatBtn > 

= < button size = "mini type = "primary bindtap = goToahdd open - type = "getUserlnfo 


bindgetuserinfo = 'getUserInfo'> 上 传 图 片 </button > 
4. </view> 


在 JS 文件 中 添加 日 定义 汕 数 goToAdd, 相 关 JSCpages/index/index. js) 代 码 户 段 如 下 : 


1. Page({ 
2 . / ¥¥ 
3 * 自 定义 函数 -- 跳 转 上 传 图 片 页 
4. x/ 


5 goToAdd: function(options) { 
6. wx. navigateTo( { 

1 url: '../add/add', 

8 }) 

9. }, 

10. |) 


为 了 测试 跳 转 后 新 页 面 是 否 也 可 以 读 取 到 用 户 个 人 信息 数据 ,可 以 临时 在 add. js 文件 的 
onLoad 哨 数 中 添加 console. logO 〇 〇 堵 句 尝试 打印 输出 用 户 的 基础 信息 和 openid。 
相关 JSCpages/add/add. js) 代 码 片 段 如 下 : 


1. var app = getApp!() 

2. Page({ 

3 / x 

4 * 生命 周期 函数 一- 监 旷 页 面 加 载 

3 汪汪 

6 onLoad: function(options) { 

7 // 坚 试 输出 用 己基 础 信息 

8. console. 1og( app. globalData. userInfo) 
9. // 坚 试 输出 用 刻 openid 

10. console. log(app. globalData. openid) 
11. } 

12. 用 


点 击 首页 右上 角 的 按钮 跳 转 新 页 面 ,此 时 Console 控制 台 的 运行 效果 如 图 19-17 所 示 。 


[WW | Console Sources Network Security AppData Audits Sensor Storage Trace Wiml 


© | top v | |Filter Default levels ™ 


kb {nickName: " 钼 小 交 世 )"， gender: 2, Longuage: "zh CCN", city: "Wuhu”, province: "Anhui”, =.} 
DCXIVANNCONGSCCASUpOruNIbwflU 


图 19-17 ”Console 控制 台 显 示 用 户 个 人 信息 


由 图 可 见 ,点 击 按钮 跳 转 上 传 图 片 页 后 可 以 将 用 户 基础 信息 和 openid 都 打印 出 来 了 ,说 
明 该 功能 生效 。 此 时 可 以 去 挥 或 者 注释 挥 这 两 个 console. log() 硬 句 , 该 语句 仅 在 开发 过 程 中 
上 临时 使 用 ,用 于 测试 是 否 获 取 到 数据 ，。 


19.3.2 上传 图 片 页 逻辑 


为 了 使 首页 可 以 显示 真实 上 传 的 图 片 素材 ,可 以 先 将 上 传 图 片 页 的 功能 实现 ,然后 传 奋 干 
张 测试 图 片 等 待 首 页 展示 使 用 。 

图 片上 传 

图 片上 传 成 功 后 需要 用 到 云 数 据 库 中 的 photos 数据 集 记 录 图 片 基 础 信 
息 ,例如 图 片 地 址 .添加 日 期 、 上 传 者 信息 等 。 因 此 首先 在 add. js 文件 顶端 声 
明 对 photos 数据 集 的 引用 ,相关 JSCpages/index/index. js) 代 码 片 段 如 下 : 


const db = wx.cloud. databasel( ) 
const photos = db.collection( 'photos') 


Pagel | 


NM Nr 


}) 


其 中 const photos 是 自 定 义 名 称 , 开 发 者 可 以 自行 更 改 。 
上 传 图 片 成 功 后 还 需要 记录 上 传 日 期 ,因此 在 add. js 文件 的 顶端 自 定 义 函 数 formatDate， 
用 于 格式 化 显示 当天 的 日 期 。 相 关 JSCpages/index/index. js) 代 码 片 段 如 下 : 


1. // 格 式 化 当前 日 期 

2. function formatDate() { 

3 Var now = new Date() 

4. Var Year = now.getFullYear() 

5 var month = now.getMonth() + 1 

6. Var day = now.getDate() 

1 

8. if (month < 10) month = '0' + month 
9. if (day <10) day = '0' + day 

10. 

11. return year + "一 + month +  "- + day 
12. ) 

13. 

14. Pagel({ 

16. }) 


修改 add. wxml 中 按钮 的 代码 ,为 其 添加 自 定义 点 击 事 件 upload, 用 于 上 传 图 片 。 
相关 WXML(pages/add/add. wxml) 代 码 片 段 修 改 后 如 下 : 


1 <!--“ 点 击 此 处 上 传 图 片 按 钮 --> 
ji < button type = 'warn' bindtap = 'upload'> 点 击 此 处 上 传 图 片 </button > 


然后 在 add. js 中 添加 肯定 义 图 数 upload, 相 关 JSCpages/add/add. js) 代 码 片 段 如 下 : 


1. Pagel({ 

区 / 尖 尖 

3. * 自 定 义 函 数 -- 上 传 图 片 

4. x/ 

号 upload: function( ) { 

6. // 选 择 图 片 

TF wx. ChooseImagel { 

8. count: 1, 

9. sizeType: [ "compressed ' ] ， 

10. sourceType: ['album', 'camera'], 

11. success: function(res) { 

12. //loading 提示 框 表 示 正 在 上 传 图 片 
13. wx. ShowLoading({ 

14. title: "上 传 中 '， 

15. }) 

16. // 获 取 图 片 临时 地 址 

17. const filePath = res.tempFilePaths[0] 
18. 

19. // 自 定义 云端 的 图 片 名 称 

20. const cloudPath = Math.floor(Math.random() * 1000000) + filePath.match(/.[”.] 
+?$/)[0] 

21. // 上 传 图 片 到 云 存 储 空间 中 

22 . wx. Cloud. uploadFile( { 

23. cloudPath, 

24. filePath, 


25. success: res => 1 


26 . 
27. 
28. 
29. 
30. 
31. 
32. 
33. 
34. 
35. 
36. 
37。 
38 . 
39 . 
40. 
41. 
42. 
43. 
44. 
45. 
46. 
47. 
48. 
49. 
50. 
51. 
52. 
3 
54. 
55. 
56. 
57。 
58 . 
59 . 
60 . 
61. 
62. 
63. 
64. 
65. 
66. 
67. 
68. 
69. 
70. 
71. 
72. 


73. 


// 提 示 上 传 成 功 


wx. ShowToast({ 
title: ' 上 传 成 功 ! '， 
duration: 3000 

}) 


// 获 取 用 亡 个 人 基础 信息 

let userInto = app.glLlobalData. userInto 
// 获 取 当 天 日 期 

let today = formatDatel() 


// 往 云 数据 集中 添加 一 条 记录 
photos. add({ 
data: { 
photoUrl: res.filelD, 
avatarUrl: userInto. avatarUr], 
country: userInfo. country, 
province: userInfo. province, 
nickName: userInfo. nickName, 
addDate: today 
}, 
success: res => { 
console. log(res) 
}， 
fail: e => { 
console. log(e) 
} 
}) 
}, 
fail: e => { 
// 提 示 上 传 失 败 
Wx. ShowToast({ 
icon: ‘none', 
title: ' 上 传 失败 '， 
}) 
} 
}) 
}, 
fail:e => { 
console. error(e) 
}, 
complete: () => { 
// 上 传 完成 后 关闭 loading 提示 框 
} 
}) 
}, 
}) 


上 述 代 码 在 自 定义 云端 图 片 名 称 时 用 了 随机 数 Math. floor (Math. random() x* 
1000000) ,表示 图 片 名 称 为 随机 生成 的 0 一 1 000 000 的 向 下 取 整 的 数 , 但 是 在 图 片 非常 多 的 情 
况 下 难免 会 碰巧 有 重复 的 ,开发 者 也 可 以 思考 其 他 自 定义 的 图 片 名 称 。 

此 外 还 需要 注意 的 是 ,一 定 要 从 首页 中 点 击 * 上 传 图 片 ” 按 钮 跳 转 到 当前 页 面 再 进行 测试 ， 
否则 可 能 无 法 获取 到 用 户 的 个 人 信息 数据 。 


点 击 首 页 右上 角 的 按钮 跳 转 到 当前 页 面 , 并 从 本 地 任意 上 传 一 张 图 片 。 
此 时 云 开 发 控制 全 的 运行 效果 如 图 19-18 所 示 。 


折 由 


慨 览 用 户 管理 数据库 ”存储 管理 三国 数 统计 分 析 
国 添 ia 焦 音 记录 列表 索引 管理 积 限 设置 


全 
十 释 如 记录 ”十 导入 (Bon 或 csy ,最 大 50M ) 村 导出 json 或 csv) 请 按 所 | 计 value 的 格 元 进行 要 季 
books 
" od4b1etfesd10415707020d760NbO0f34 
"openld OCXJW4SAAWVNCOGO6SCCASUPOrUNJDWT 人 U 
"addiDatle" 20106-24 
“avatarUrT" https /Wx qiogo enimmopeniy 32/QOMTWGTTTJer0sqPDfirMTdrVXBIOibHxibxviMGnpcokX5d5d9uEgmaoz5HnLPYLIC79xSj29_ 
COUNIryChina 
miEkNamer 周 小 贝 岛 
“photoUrr" cloud-//es-1e694e 7465-tes-1e694e-12576198490/493251 jpg 


"province™ Anhui 


章 本 机 云 TC6 想 供 反 癸 及 计算 服务 


(a) 云 数据 库 的 photos 集 中 出 现 记录 


"db0-les- Te6dde | 


训 料 名 
四 books 


44093251.pg cloud:/Mtes- 106946.7465-t08-18... 355.50KE 20106-24 11-151 


总 | 车 六 二 TC 二 供 邦 侵 及 计划 根 务 


(b) 云 存储 中 出 现 已 上 传 的 图 片 
图 19-18 云 开 发 控制 台 显 示 信 息 


pepo 不 稻 再 继续 上 传 若干 张 本 地 图 片 进 行 = 测试 ， 
展示 图 片 历史 记录 
在 往 云 数据 库 中 添加 记录 时 ,会 自动 登记 当前 用 户 的 openid 并 记录 成 
_openid” 字 段 , 因 此 只 要 筛选 出 openid 属性 值 与 当前 用 户 匹 配 的 所 有 数据 即 。 人 并 齐 解 


生 夺 


可 展示 图 片 历史 记录 。 
在 add. js 文件 中 添加 月 定义 困 数 getHistoryPhotos, 用 于 获取 当前 用 户 已 经 上 传 过 的 图 
上 请 数 据 。 相 关 JSCpages/yadd/ add. js) 代 码 斤 段 如 下 : 


1. Pagel({ 

2 / x 

3 x 自 定义 函数 -- 获取 已 上 传 图 片 历 史记 录 
4. x 

5s, getHistoryPhotos: function() { 

6 // 获 取 当 前 用 户 的 openid 

7 let openid = app.globalData. openid 

8. 

9. // 从 云 数据 集 查找 当前 用 户 的 上 传记 录 
10. photos. where( { 

11. _Oopenid: openid 

12. }).get({ 

13. success:res= >1{ 

14. this. setData( {historyPhotos: res. data}) 
15. } 

16. }) 

17. 要 

18. }) 


上 述 代 码 表示 从 云 数据 集 photos 中 查找 当前 用 户 上 传 的 图 片 记录 ,并 将 获取 到 的 记录 和 集 
存 到 变量 historyPhotos 中 ,该 名 称 可 以 由 开发 者 自 定义 。 

修改 add. wxml 文件 中 显示 图 片 历史 记录 的 代码 ,使 用 wx:for 循环 来 展示 实际 图 片 。 

相关 WXML(pages/add/add. wxml) 代 码 片 段 如 下 : 


1, <!- 一 图 片 集 --> 

PR < Vlew> 

E 人 < block wx:for = '{{historyPhotos}}' wx:key = 'history{ {index}}'> 
4. < image src = '{{item. photoUrl}}'></image > 

i </block > 

6. </view> 


最 后 在 add. js 文件 的 onLoad 和 upload 图 数 中 分 别 引 用 getHistoryPhotos, 表 示 打 开 当 
前 页 面 和 上 传 新 图 片 后 都 更 新 显示 图 片 历史 记录 。 
相关 JSCpages/add/add. js) 代 码 片 段 如 下 : 


1. Pagel({ 

7 / x 

3 * 日 定义 函数 -一 上 传 图 片 

4 */ 

3. upload: function() 1 

6 // 选 择 图 片 

7 wx. ChooseImage( { 

8 count: 1, 

9. sizeType: [ "compressed ' |， 
10. sourceType: ['album', "camera' | ， 
11. success: function(res) { 
12. 

13. }, 

14. fail: e => 1 

是 console. errorl(e) 


16. }, 


时 运 


1 7 complete: () => { 


18. // 上 传 完成 后 关闭 loading 提示 框 
19. wx.hideLoading( ) 

20. // 更 新 图 片 历史 记录 

21. this. getHistoryPhotos( ) 

22. } 

23. }) 

24. Fe 

25. 

26. /xx 

27. < 生命 周期 图 数 -- 监 听 页 面 加 载 
28. */ 


29. onLoad: function(options) { 
30. // 更 新 图 片 历史 记录 

31. this. getHistoryPhotos() 
32; 4 

33. 

34. }) 


在 已 经 有 上 传 图 片 的 前 提 条 件 下 打开 上 传 图片 页 ,此 
行 效果 如 图 19-19 所 示 。 
由 图 可 见 , 当 前 页 面 可 以 成 功 显 示 云 存储 中 的 图 片 , 此 


19-19 ”Console 控制 台 显 示 用 户 


时 上 传 图 片 页 的 逻辑 全 部 完成 。 信人 信息 


19.3.3 首页 逻辑 


index/index. js) 代 人 码 厂 段 如 下 : 视频 讲解 


首页 


pe Ne 


有 图片 列表 展示 1 
首先 在 index. js 文件 顶端 声明 对 photos 数据 集 的 引用 ,相关 JSCpages/ 国 碘 局 


1. const db = wx. cloud. database() 

2. const photos = db.collection( 'photos') 
3. 

4. Page({ 

5. 

| 


其 中 const photos 是 自 定义 名 称 ,开发 者 可 以 自行 更 改 。 


在 index. js 文件 的 onShow 函数 中 追加 对 云端 数据 库 的 读 取 代码 ,这 样 从 其 他 页 面 返 回 
时 也 可 以 刷新 图 片 列表 。 相 关 JS(pages/index/index. js) 代 码 片 段 如 下 : 


Pagel(l { 
/ xx 
< 生命 周期 靖 数 一 -监听 页 面 显 示 
x*x/ 
onShow: function() { 
// 获 取 图 片 列表 (按照 添加 日 期 降序 排列 ) 
photos. orderBy( 'addDate', 'desc').get({ 
success: res =>{ 
this. setDatal { 
photoList: res. data 
}) 
} 


AD 


上 上 上 
CR 


且 按 照 上 传 日 期 将 最 新 的 图 片 显示 在 最 上 面 。 


现 头 像 图 片 的 导航 功能 。 相 关 WXML(pages/index/index. wxml) 代 码 片 段 


3 


修改 index. wxml 文件 中 卡片 的 相关 代码 ,使 用 wx:for 循环 语句 显示 实际 图 片 信息 。 
相关 WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 


1. Ri 一 让 月 一 一 > 

2 <View class = 'card' wx:for = '{{photoList}}'wx:key = 'photo{{index}}'> 
: <! 一 一 卡片 页 眉 -一 > 

4. <view class = 'card 一 head > 

5 < image class = 'avatar' src = '{{item. avatarUrl}}' mode = 'widthFix'></image > 
6 . < view ClLass = 七] 七 Je > 

7. < text class = 'nickName'>{ {item. nickName} }</text > 

8. < text class = 'address'>{{item. province}}, {{item. country} }</text > 
2 </ View> 

10. </view> 

11. 

12. <! 一 一 卡片 主体 -一 > 

33 < Vlew class= "card— body > 

14. < image src = '{{item. photoUrl}}' mode = 'widthFix'></image > 

15. </view> 

16. 

17. <! 一 一 卡片 页 脚 一 一 > 

18. < VlIew class= 'card— foot'> 

19. < text >{{item. addDate} }</text > 

20. </view> 

21. </view> 


22, </view> 
为 了 显示 出 上 传 日 期 的 区 别 ,开发 者 可 以 临时 手动 修改 云 数据 集 里 面 addDate 字段 的 值 ， 
运行 效果 如 图 19-20 所 示 。 

由 图 可 见 , 首 页 已 经 可 以 成 功 显示 当前 云 存 储 中 的 图 片 和 上 传 者 信息 ,并 


点 击 头 像 跳 转 个 人 主页 
修改 index. wxml 文件 中 卡片 页 眉 的 相关 代码 ,使 用 < navigator > 组 件 实 


1. <! 一 一 卡片 页 眉 --> 

2. <Vlew class= ‘card— head > 

3. < navigator url = '../homepage/homepage?id = {{item. openid}}'> 

4. < image class = 'avatar' src = '{{item. avatarUrl}}' mode = 'widthFix'></ image > 
= </navigator > 

6. <Vlew Class= 'title'> 

了 < text class = 'nickName'>{{item. nickName} }</text > 

8. < text class = 'address'>{{item. province}}, {{itenm,. country} }</text > 

9. </view> 

10. </ View> 


上 述 代 码 表示 点 击 头 像 图 片 可 以 跳 转 到 homepage 页 面 。 由 于 未 来 实际 使 用 该 小 程序 时 


有 可 能 首页 会 呈现 多 名 不 同 用 户 的 头像 信息 ,所 以 在 < navigator > 组 件 的 url 属性 值 中 携带 日 


EY wm 


AnhuiChina 


2019-06-24 


周 小 贝 若 
AnhuiChina 
2019-06-24 


周 小 贝 名 
Anhui China 


2019-06-23 


(a) 页 面 初 始 效 来 (b) 下 拉 深 动 效 果 
图 19-20 ”首页 图 片 列表 展示 


定义 参数 id, 用 于 记录 当前 被 点 击 用 户 的 openid。 
后 续 的 代码 逻辑 需要 在 个 人 主页 (homepage) 中 实现 。 
区 点 击 图 片 跳 转 图 片 展示 页 
index. wxml i ai 使 用 < We li 


如 下 - 视频 讲解 


1. <! 一 一 卡片 主体 -一 > 

2. <VlIew class = card 一 body > 

< 汪 < navigator url = '../detail/detail?id= {{item. id}}'> 

4. < image src = '{{item. photoUrl}}' mode = 'widthFix'></image > 
5. </navigator > 

6 . </view> 


上 述 代码 表示 点 击 展示 图 片 可 以 跳 转 到 detail 页 面 。 由 于 首页 会 呈现 不 同 图 片 信 息 , 所 
以 在 < navigator > 组 件 的 url 属性 值 中 携带 和 月 定义 参数 id, 用 于 记录 当前 被 点 击 图 片 的 id。 
后 续 的 代码 逻辑 需要 在 图 片 展 示 页 (detail) 中 实现 。 


19.3.4 个 人 主页 他 和 辑 


获取 被 点 击 用 户 上 传 的 图 片 列表 

从 自 页 跳 转 到 个 人 主页 时 会 携 宙 被 点 击 用 户 的 openid 值 ,所 以 可 以 去 云 
数据 集 查找 该 用 户 上 传 的 所 有 图 片 记录 。 5 

首先 在 homepage. js 文件 顶端 声明 对 云 数据 集 photos 的 引用 ,相关 JS 下 


(pages/homepage/homepage. js) 代 人 码 上 斤 段 如 下 : 


1. 
r 
: 
4. 
-. 
6 . 


const db = wx.cloud. databasel ) 
const photos = db.collection( 'photos') 


Pagel { 


人 


其 中 const photos 是 自 定义 名 称 , 开 发 者 可 以 自行 更 改 。 
然后 在 homepage. js 文件 的 onLoad 函数 中 追加 对 云 数据 集 photos 的 读 取 代码 。 
相关 JSCpages/index/index. js) 代码 片段 如 下 : 


1. 
2 
5 
4. 
3 
6. 
过 
8. 


9 


10. 
11. 
12. 
1 
14. 
15. 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
3. 
24. 
r 二 
26. 


21. 
28. 


Pagel { 
/ xx 
* 生命 周期 图 数 -- 监听 页 面 加 载 
x/ 
onLoad: function(options) { 
// 获 取 被 点 击 用 户 的 openid 


}) 


let openid = options. Id 


// 显 示 loading 提示 框 
wx. showLoading( { 

title: ' 数 据 加 载 中 '， 
}) 


// 查 找 云 数据 集 photos 中 该 用 户 的 图 片上 传记 录 
photos. orderBy( 'addDate', 'desc').wherel!{ 
_openid: openid 
}).get({ 
success: res => | 
// 获 取 数 据 记 录 
this. setDatal { 
photoList: res. data 
}) 
// 关 闭 loading 提示 框 
wx. hideLoading( ) 


}) 
}, 


最 后 修改 homepage. wxml 中 卡片 的 代码 ,使 用 wx:for 循环 语句 显示 实际 图 片 信息 。 
相关 WXML(pages/homepage/homepage. wxml) 代 人 码 厂 段 如 下 : 


0 吕 (人 忆 Co lo 搬 


上 产 ” 睛 捕 全 
人 


<! 一 一 卡片 -一 > 
< View Class = 'card' wx:for = '{{photoList}}'wx:key = 'photo{{index}}'> 
<!-- 卡片 页 眉 --> 
< Vlew Class = 'card— head > 
< image class = 'avatar' src = '{{item.avatarUrl}}' mode = 'widthFix"></image > 
< Vlew class= title'> 
< text class = 'nickName'>{{item. nickName} }</text > 
< text class = 'address'>{{item. province}}, {{item. country}}</text > 
</ View> 
</view> 


< 一 卡片 主体 一 > 


<VlIew class= 'card— body > 
< image src = '{{item. photoUrl}}' mode = 'widthFix'></image > 
</view> 


< 一 一 卡片 页 脚 -一 > 
<VlIew class= Card 一 foot > 
< text >{{item.addDate} }</text > 
</View> 
</view> 


此 时 运行 歼 朱 如 图 19-21 所 示 。 


周 小 贝 个 人 主页 
NE 2019-06-24 
周 小 由 


Anhui,China 


周 小 贝 外 
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2019-06-23 


(a) 页 面 初始 效果 (b) 下 拉 深 动 效果 
图 19-21 个 人 主页 的 图 片 列 表 展 示 


由 图 可 见 , 个 人 主页 已 经 可 以 成 功 显示 云 存储 中 的 图 片 , 并 且 按照 上 传 日 期 将 最 新 的 图 片 


显示 在 最 上 面 。 
由 于 尚未 实现 顶端 用 户头 像 和 昵称 更 新 的 逻辑 ,所 以 目前 仍然 是 测试 图 
让 驱 太 。 


显示 顶端 用 户头 像 和 昵称 
修改 homepage. wxml 文件 中 顶端 头像 和 昵称 的 代码 ,使 用 photoList 数 


据 中 的 任意 一 条 均 可 获取 头像 和 昵称 属性 值 。 相 关 WXML (pages/ 视频 讲解 
homepage/homepage. wxml) 人 代码 片段 如 下 : 


Wn 


<!-- 头像 和 昵称 -一 > 
<Vlew Class =  aVatarBox > 
< image src= '{{photoList[0].avatarUrl}}'></image > 
< text >{{photoList[0].nickName}} 个 人 主页 </text > 
</View> 


微 信 小 程序 开发 实战 - 微 课 视频 版 妨 JO 


此 时 运行 效果 如 图 19-22 所 示 。 

由 图 可 见 , 此 时 已 经 可 以 成 功 显示 当前 用 户 的 个 人 信 
上 了 。 

总 击 图 片 跳 转 图 片 展示 页 

修改 homepage. wxml 文件 中 卡片 主体 的 
相关 代码 ,使 用 < navigator > 组 件 实 现 上 传 图 1 Fl 
厂 的 导航 功能 。 相 关 WXML(pages/ homepage/，” 国 THe 


\ 个 人 主页 

homepage. wxml) 代码 上 请 段 如 下 : 视频 讲解 站 

1 <!-- 卡 片 主体 --> WW 

2. <View class= card 一 body > 

汪 < navigator url = '../detail/detail? id = {{item. 

id}}'> 

4. < image src = '{{item., photoUrl}} ”mode = 

'widthFix'></ image > 

= </navigator > 

6. </view> 


上 述 代 人 码 表 示 操 击 展示 图 厂 可 以 跳 转 到 detail 页 面 。 由 
于 首页 会 呈现 不 同 图 片 信息 ,所 以 在 < navigator > 组 件 的 url 
属性 值 中 携带 上 月 定义 参数 id, 用 于 记录 当前 被 点 击 网 片 的 id。 

后 续 的 代码 逻辑 需要 在 图 片 展示 页 (detail) 中 实现 。 


2019-06-24 


图 19-22 个 人 主页 的 顶端 头像 和 


昵称 展示 
19.3.5 图片 展示 页 更 得 
加 显示 当前 图 片 a 
从 首页 或 个 人 主页 的 图 片 卡片 跳 转 到 图 片 展示 页 时 均 会 携带 被 点 击 图 片 es 


的 id, 所 以 可 以 去 云 数 据 集 查找 该 图 片 的 记录 。 人 
首先 在 detail. js 文件 顶端 声明 对 云 数 据 集 photos 的 引用 ,相关 JSCpages/ 
detail/ detail. js) 代 人 码 厂 段 如 下 : 


const db = wx.cloud. database( ) 
const photos = db.collection( 'photos') 


1 

2 

3. 

4. Pagel1 
5 . i 
6. }) 


其 中 const photos 是 目 定 义 名 称 , 开 发 者 可 以 月 行 更 改 。 
然后 在 detail.js 文件 的 onLoad 函数 中 追加 对 云 数据 集 photos 的 谈 取 代码 。 
相关 JS(pages/detail/ detail. js) 代 码 片 段 如 下 . 


1. Pagel({ 

2 / 关 关 

3 * 生命 周期 果 数 -- 监听 上 页面 加 载 

4 x*/ 

2 onLoad: function(options) { 

6 // 根 据 图 片 id 获取 云 数 据 集中 的 图 片 记录 
7 photos. doc( options. id).get({ 

8 success: res => { 


最 后 修改 detail. wxml 中 图 片 的 代码 ,显示 实际 图 厂 信息 。 
相关 WXML(pages/ detail/ detail. wxm]) 代 人 码 厂 段 如 下 : 


1. <! 一 顶端 图 片 展示 -一 > 
2. < image src= '{{photo. photoUrl}}' mode = 'widthFix'></image> 


从 首页 点 击 任意 图 片 ,此 时 运行 效果 如 图 19-23 所 示 。 


17:33 5 


到 片 分 享 六 琉 “me 


oY 周 小 由 全 


AnhuiChina 
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有司 小 全 


AnhuiChina 


(a) 目 页 戏 本 (b) 图 片 展示 页 效果 
图 19-23 ”图 片 展示 页 显示 顶端 图 片 


由 图 可 见 , 此 时 点 击 首 页 卡片 列表 中 的 任意 图 片 均 可 在 图 片 展示 页 显示 正确 的 画面 。 实 
际 上 从 个 人 主页 点 击 图 片 进入 图 片 展示 页 也 是 一 样 的 效果 ,这 里 不 再 男 行 演示 。 

下 载 图 片 到 本 地 设备 

修改 detail. wxml 中 相关 按钮 的 代码 ,为 其 添加 点 击 事件 downloadPhoto。 

相关 WXML(pages/ detail/ detail. wxm]) 代 人 码 厂 段 如 下 : 

1. <!-- 按钮 区 域 --> 

2. < Vlew> 

3. < button type = 'primary' plain bindtap = 'downloadPhoto' > 下 载 到 本 地 </ 

button > 

4. < button type = 'primary' plain > 分 享 给 好 友 </button > 


5. < button type = 'primary' plain> 人 全屏 预览 </button > 
6. </view> 


然后 在 detail. js 文件 中 人 退 加 月 和 定义 因数 downloadPhoto ,相关 JS(pages/ detail/ detail. js) 


二 一 微 信 小 程序 开发 实战 - 微 课 视频 版 车 人 


1. Page { 

2 / 

3 x* 自 定义 函数 -- 下载 图 片 到 本 地 
4. */ 

downloadPhoto: function() { 

6 // 从 云 存 储 中 进行 图 片 下 载 

7 Wx. Cloud. downloadFilel( { 

8 filelID: this. data. photo. photoUr], 
9. success: res => 1 

10. // 保 存 图 片 到 本 地 相册 

11. wx. SavelImageToPhotosAlbum( { 
12. filePath: res.tempFilePath, 
13. success: res => { 

14. wx. ShowToast( { 

15. title: "保存 成 功 ! '， 
16. }) 

17. } 严 

18 . fail: err => { 

19 . wx. ShowToast({ 

20. title: ' 保 存 失败 !'， 
21. icon: ‘none' 

2 }) 

2 } 

24. }) 

25, }, 

26. fail: err => { 

27。 console. log(err) 

28. } 

29. }) 

30. } Fr 

31, 4) 


此 时 运行 效果 如 图 19-24 所 示 。 


(a) 点 击 按钮 进行 图 片 下 载 
图 19-24 ”下 载 图 片 到 本 地 设备 效果 


(b) 保存 成 功 提示 


当前 是 计算 机 端 模拟 运行 效果 ,可 以 上 月 选 图 片 另 存 为 地 址 ; 如 果 用 手机 测试 会 将 图 片 直 
接 保 存 到 手机 相册 中 。 

分 享 图 片 给 好 友 

修改 detail. wxml 中 相关 按钮 的 代码 ,为 其 汰 加 open-type 属性 。 

相关 WXML(pages/detail/ detail. wxml) 人 代码 片段 如 下 : 


1. <!-- 按钮 区 域 ---> 
2. <Vlew> 

: < button type = 'primary' plain bindtap = 'downloadPhoto' > 下 载 到 本 地 </button > 
4. < button type = 'primary' plain open - type = 'share'> 分 享 给 好 友 </button > 

5 < button type = 'primary' plain>3> 人 全屏 了 预览 </button> 

6. </view> 


此 时 点 击 “ 分 享 给 好 友 ” 按 钮 的 效果 就 等 同 于 点 击 右 上 角 的 %…”, 都 可 以 进行 页 面 分 享 。 
如 果 用 户 需 要 月 定义 分 人 圣 的 内 容 ,; 可 以 在 detail. js 文件 中 修改 目 市 的 onShareAppMessage 
负数 ,相关 JSCpages/ detail/ detail. js) 代 人 码 厂 段 如 下 .、 


1. Pagel({ 

和 / 尖 关 

: * 用 户 点 击 右 上 角 分 享 

4. “ 

5 onShareAppMessage: function() { 

6. return { 

7. title: “给 你 分 享 一 张 好 看 的 图 片 '， 
8. path: 'pages/detail/detail?id= ' + this.data.photo. id 
9. } 

10. } 

11. 了 


此 时 运行 效果 如 图 19-25 所 示 。 
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(a) 反击 按钮 进行 图 片 分 娃 (b) 图 片 分 享 对 话 框 
图 19-25 分享 图 片 效 果 


散 课 视 频 版 


微 信 小 程序 开发 实战 


当前 是 计算 机 端 模拟 运行 效果 ,如 果 用 手机 测试 还 可 以 选择 微 信 好 友 列表 进行 发 送 。 
全 屏 预 览 图 片 

修改 detail. wxml 中 相关 按钮 的 代码 ,为 其 添加 点 击 事件 previewPhoto。 
相关 WXML(pages/ detail/ detail. wxm]) 代 码 片 段 如 下 : 

1 二 一 按钮 区 域 一 一 > 


2. <Vlew> 
二 < button type = 'primary' plain bindtap = 'downloadPhoto' > 下 载 到 本 地 </ 


button > 
4. < button type = 'primary' plain open - type = 'share'> 分 讲 给 好 友 </button> 
< < button type = 'primary' plain bindtap = 'previewPhoto' > 全 屏 预 览 </button > 


6. </view> 


然后 在 detail. js 文件 中 追加 月 定义 图 数 previewPhoto, 相 关 JS(pages/detail/ detail. js) 代 


1. Pagel({ 

2 / x 

3 *x 自 定义 函数 -- 全 屏 预览 图 片 
4 x*/ 

= 本 previewPhoto: function() { 

6 // 定 义 图 片 URL 地 址 

7 var urls = [this. data. photo. PhotoUr1l] 
8 // 全 屏 预 览 图 片 

9 wx. PreviewImage( { 

10. urls: urls, 

11. }) 

12. 上 

13. }) 


此 时 运行 效果 如 图 19-26 所 示 。 


(a) 点 击 按钮 进行 图 片 全 屏 预 览 (b) 全 屏 预览 效果 
图 19-26 全屏 预览 图 片 效果 


当前 是 计算 机 端 模 拟 运 行 效 果 ,如果 用 手机 预 宽 , 长 按 还 可 以 保存 图 片 到 手机 相册 中 。 


19.4.1 应 用 文件 代码 展示 
app. json 文件 的 完整 代码 如 下 : 


1,。 1 

2 pages : [ 

3. "pages/index/ index", 

4. "pages/homepage/ homepage", 

< "pages/detail/detail", 

6 "pages/add/add" 

时 Ys 

8. “Wincow : { 

9. "navigationBarBackgroundColor": "#F6F6F6", 
10. "navigationBarTitleText": "图 片 分 享 社区 "， 
11. "navigationBarTextStyle”" : "black" 

17. } 

13. } 


app. wxss 文件 的 完整 代码 如 下 : 
/ x 1. 整体 容器 样式 x / 


. Container { 
display: flex; 
flex— direction: column; 


background — color: whitesmoke; 


1 

2 

3 

4 

2. align— items: center; 
6 

7 min— height: 100vh; 
8 

9 


10. /x*2. 卡 片区 域 整体 样式 * / 
11. .card { 

12. width: 710rpx; 

了 于 border — radius: 20rpx; 
14. background ~ color: white; 
15. margin: 20rpx 0; 

16. |} 

17. /x*2--1 卡片 页 眉 */ 

18. .card— head { 

19. display: flex; 


20. flex— direction: row; 
21. align ~ items: center; 
22,. } 

23. 


24. /x*2 一 1 一 1 头像 图 片 x*/ 
25. .avatar { 

26. width: 150rpx; 

27. border 一 radius: 50%.; 
28. margin: 0 20rpx; 

29. } 


19. 


31, 
S 
33. 
34. 
9 
36. 
了 
38 . 
:把 ， 
40. 
41. 
42. 
43. 
44. 
45. 
46. 
47. 
48. 
49. 
50. 
5 
2 


ss 
54. 
5 
56 . 


/x*2-1-2 文 字 信息 */ 
.title { 
display: flex; 


flex— direction: column; 
} 
/x2 一 1 一 2(1) 昵称 */ 
. nickName { 
font — size: 35rpx; 
margin: 0 10rpx; 
} 
/x*2-1-2(2) 所 在 地 区 x*/ 
.address { 
font 一 size: 30rpx; 
Color: gray; 
margin: 0 10rpx; 
} 
/*2 一 2 卡片 主体 */ 
.Card— body image { 
width: 100%.; 


} 
/x*2 一 3 卡片 页 脚 */ 
. Card — foot{ 


font 一 size: 35rpx; 
text ~ align: right; 
margin: 20rpx; 

} 


app.js 文件 的 完整 代码 如 下 (该 文件 代码 为 云 模板 目 动 生成 ). 


1 
2 
3 
4. 
5 
6 
8 
9 


1 
14. 


Appl 1 
onLaunch: function() { 


if (!Iwx.cloud) { 
console. error( ' 请 使 用 2.2.3 或 以 上 的 基础 库 以 使 用 云 能 力 ') 
} else { 
wx. Cloud. init({ 
traceUser: true, 
}) 
} 


this.globalData = {} 
} 
}) 


4.2 云 国 数 文 件 代 人 码 展 示 


云图 数 getOpenid 的 JS 文件 (getOpenid/index. js) 的 完整 代码 如 下 : 


-Ga 


// 云 图 数 人 口 文件 


const cloud = require('wx— server— sdk') 
cloud. init( ) 


// 云 函数 入 口 函 数 


exports. main = async (event, context) => { 


8. const wxContext = cloud. getWXContext() 


9. 
10. return { 
11. openid: wxContext. OPENID 
12. } 
13. |} 
19.4.3 页 面 文件 代码 展示 
首页 代码 展示 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


1. <Vlew class= ContalneTr > 

2. <! 一 一 卡片 -一 > 

有 人 <Vliew class= "card' wx:for = '{{photoList}}' wx:key = 'photo{{index}}'> 
4. <! 一 一 卡片 页 眉 -一 > 

本 5 < Vlew class= ‘card— head > 

6 . < navigator url = '../homepage/homepage?id= {{item. openid}}'> 

7. < image class = 'avatar' src = '{{item. avatarUrl}}' mode = 'widthFix'></image > 
8. </navigator > 

9. < Vlew Class= title'> 

10. < text class = 'nickName'>{{item. nickName} }</text > 

11. < text class = 'address'>{{item. province}}, {{item. country}}</text > 
12. </view> 

13， </view> 

14. 

15. <!-- 卡片 主体 --> 

16. <vVliew class= "card— body > 

17， < navigator url = '../detail/detail?id= {{item. id}}'> 

18. < image src = '{{item, photoUrl}}' mode = 'widthFix'></image> 

19. </navigator > 

20. </view> 

21. 

22. <!-- 卡片 页 脚 --> 

3. < Vlew class= "card— foot'> 

24. < text >{{item.addDate} }</text > 

pr </view> 


26 . < /view > 
27,. </view> 


29. <!--“ 上 传 图 片 按 钮 --> 

30. < Vlew class = ‘floatBtn'> 

31. < button size = 'mini' type = 'primary ' bindtap = 'goToAdd' open — type = 'getUserlnfo' 
bindgetuserinfo= 'getUserInfo'> 上 传 图 片 </button > 

32., </view> 


WXSS 文件 (pages/index/index. wxss) 的 完整 代码 如 下 : 


/ * 浮动 按钮 桩 式 * / 
.floatBtnl 
position: fixed; 


1 

2 

本 

4. top: 50rpx; 
right: SOrpx; 
6 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 ， 


1. const db = wx. cloud. databasel ) 

2. const photos = db.collection( 'photos') 

3. var app = getApp!() 

4. 

5. Page({ 

6. / x 

了 * 上 月 定义 师 数 -- 跳 技 上 传 图 片 页 

8. *x/ 

9., goToadd: function(options) { 

10. wxX.navigateTo( { 

11. url: '../add/add ' ， 

12. }) 

A 

14. 

15。 /xx 

16. * 明定 义 函 数 -获取 用 户 个 人 信息 

17. A 

18. getUserInfo: function(e) { 

19. // 符 试 打 印 输出 个 人 信息 ,测试 是 否 获取 成 功 
20. / /console. log(e. detail. userInfo) 

21. 

37. // 将 用 户 个 人 信息 存放 到 全 局 变量 userInfo 中 
23. app. globalData. userInfo = e€. detail. userInfo 
24. 

25. // 检 测 是 否 已 经 获取 过 了 用 户 openid 信息 

26. if (app. globalData. openid == null) 1 

27. // 如 果 是 第 一 次 登录 , 则 使 用 云 靖 数 获 取 用 户 openid 
28. wx. Cloud. callFunction( { 

29. name: "getOpenld ' ， 

30. complete: res =>{ 

31. // 和 试 打印 输出 个 人 信息 ,测试 是 否 获取 成 功 
32. //console. log(res. result. openid) 

33. // 将 用 户 openid 信息 存放 到 全 局 变量 openid 中 
34. app. globalData. openid = res. result. openid 
249 } 

36. }) 

37. } 

38. 让 

39. /xx 

40. * 生命 周期 图 数 -- 监听 页 面 显示 

41. 关 / 

42. onShow: function() { 

43. // 获 取 图 片 列表 (按照 讨 加 日 期 降序 排列 ) 

44. photos. orderBy( 'addDate', 'desc'). get({ 

45. success: res => { 

46. this. setDatal { 

47. photoList: res. data 

48. }) 

49. } 

50. }) 

51. } 


(中 
ho 
Mg 
Ms 


个 人 主页 代码 展示 
WXML 文件 (pages/homepage/homepage. wxml) 的 完整 代码 如 下 : 


1. <Vlew class = ContalneIT > 

2. <!-- 头像 和 昵称 -一 > 

二 <Vlew class =  aVatarBox > 

4 . < image src = '{{photoList[0].avatarUrl}}'></image > 

: < text >{{photoList[0].nickName}} 个 人 主页 </text > 

6. </View> 

了 

8. > 

9 . <Vliew class = "card' wx:for = '{{photoList}}' wx:key = 'photo{{index}}'> 
10. <!- 一 卡片 页 眉 -一 > 

11. <View class= card 一 head > 

12. < navigator Url = '../user/user?id= {{item. openid}}'> 

13. < image class = 'avatar' src = '{{item. avatarUrl}}' mode = 'widthFix'></ image > 
14. </navigator > 

上 ES， < VlIew class= ‘title'> 

16. < text class = 'nickName'>{ {item. nickName} }</text > 

17. < text class = 'address'>{{item. province}}, {{item. country} }</text > 
18. </view > 

19. </view> 

20 . 

21 . <!- 一 卡片 主体 --> 

22. <Vlew class= ‘card— body > 

23. < navigator url = ',./detail/detail?id= {{item. id}}'> 

24. < image src = '{{item. photoUrl}}' mode = 'widthFix'></image > 
do. </navigator > 

26. </view> 

之 了， 

28. <!- 一 卡片 页 脚 --> 

29. <Vlew class= 'card— foot'> 

30. < text >{{item.addDate} }</text > 

31. </view> 

32. </view> 


33. </view> 
WXSS 文件 (pages/homepage/homepage. wxss) 的 完整 代码 如 下 : 


/* 涉 像 区 域 */ 
. avatarBoxl{ 
display: flex; 


flex— direction: column; 


padding — top: 100rpx; 
} 
/* 头 像 区 域 中 的 头像 图 片 */ 
.avatarBox image{ 
10. width: 200rpx; 
11. height: 200rpx; 
12. border 一 radius: 50$.; 
13. } 
14. /* 头 像 区 域 中 的 昵称 文本 */ 
15. .avatarBox 七 ext{ 
16， margin: 30rpx 0 ; 
17。 } 


1 
2 
3 
4 
5 . align— Items : center; 
6 
了 
8 
9 


JS 文件 (pages/homepage/homepage.js) 的 完整 代码 如 下 : 


1. const db = wx.cloud. databasel ) 

2. const photos = db.collection( 'photos') 
3 

4. Page({ 

5: / x 

6 * 和 牛 命 周期 函数 -一 监听 页 面 加 载 
了 关 1/ 

8 onLoad: function(options) { 

9. // 获 取 被 点 击 用 户 的 openid 

10. let openid = options. 1d 

11. 

12. // 显 示 loading 提示 框 

13. wx. ShowLoading( { 

14. title: ' 数 据 加 载 中 '， 

15. }) 

16. 

17. // 查 找 云 数据 集 photos 中 该 用 户 的 图 片上 传记 录 
18. photos. orderBy( 'addDate', "desc '). Wherel({ 
19. _openid: openid 

20. | 

21. success: res =>f 

rh // 获 取 数 据 记 录 

23. this. setDatal { 

24. photoList: res. data 

25. }) 

20. // 关 闭 loading 提示 框 

27. wx. hideLoading!( ) 

28. } 

29. }) 

30. } 

31. }) 


图 片 展示 页 代码 展示 
WXML 文件 (pages/detail/ detail. wxml) 的 完整 代码 如 下 ， 


<!-- 顶端 图 片 展 示 -一 > 
< image src = '{{photo. photoUrl}}' mode = 'widthFix'></image > 


<!- 一 按钮 区 域 --> 
< Vlew> 
< button type = 'primary' plain bindtap = 'downloadPhoto' > 下 载 到 本 地 </button > 
< button type = 'primary' plain open — type = 'share'> 分 侍 给 好 友 </button> 
< button type = 'primary' plain bindtap = 'previewPhoto' > 全 屏 预 览 </button> 
</view> 


WXSS 文件 (pages/ detail/ detail. wxss) 的 完整 代码 如 下 : 
/* 顶端 展示 图 片 样式 * / 


imagel 
width: 750rpx; 
} 
/按钮 外 层 view*/ 
view! 


padding: 0 50rpx; 


Dm Dp 


-Tn 


8. } 

9. /x 按钮 样式 */ 
10. button{ 

11. margin: 10rpx; 
12. | 


JS 文件 (pages/detail/ detail. js) 的 完整 代码 如 下 : 


1. const db = wzx.cloud. databasel ) 

2. const photos = db.collection( 'photos') 
: 

4. Page({ 

/ #x 

6. * 上 月 定义 因数 -- 下载 图 片 到 本 地 
年 : x/ 

8. downloadPhoto: function() { 

9. // 从 云 存 储 中 进行 图 片 下 载 

10. Wx. Cloud. downloadFile( 1{ 

11. fileID: this. data. photo. photoUr], 
12. success: res =>1 

13. // 保 存 图 片 到 本 地 相册 

14. wx. SaveImageToPhotosAlbum({ { 
15. filePath: res. tempF ilePath, 
16. success: res =>1 

17. wx. ShowToast( { 

18. title: ' 保 存 成 功 ! '， 
19. }) 

20. ls 

21. fail: err => { 

22. wx. ShowToast( { 

23. title: ' 保 存 失 败 !'， 
24. icon: ‘none' 

25; }) 

26. } 

2 }) 

28. 

29. fail: err => { 

30. console. log( err) 

31. } 

32. }) 

史记 请 | 

34 . / x 

29 x 目 定 义 图 数 -- 全 屏 预 哎 图 片 
36. 关 / 

37. previewPhoto: function() { 

38. // 定 义 图 片 URL 地 址 

39. var urls = [this. data. photo. photoUTr1 | 
40. // 全 屏 预 览 图 片 

41. wx. previewImagel { 

42. urls: urls, 

43. }) 

44. }, 

45. /x¥ 

46. < 生命 周期 图 数 -- 监听 页 面 加 载 
47. x 


48. onLoad: function(options) { 


49. // 根 据 图 片 id 获取 云 数据 集中 的 图 片 记录 
50. photos. doc(options. id) .get({ 

1 success: res => { 

5 this. setData({ photo: res. data }) 
53. } 

54. }) 

22. }, 

S56 /2 

57. < 用 户 点 击 右上 角 分 享 

59., 半 

59. onShareAppMessage: function() { 

60. return { 

61. title: ' 给 你 分 享 一 张 好 看 的 图 片 "， 
62. path: 'pages/detail/detail?id=' + this. data. photo._id 
63. } 

64. } 

65. 

上 传 图 片 页 代码 展示 


WXML 文件 (pages/add/add. wxml) 的 完整 代码 如 下 : 


iD 捕 


< VlLew Class = 'container'> 


<!--“ 上 点击 此 处 上 传 图 片 ? 按 钮 ~-> 
< button type = 'warn' bindtap = 'upload'> 点 击 此 处 上 传 图 片 </button > 


<!- 一 已 上 传 图 片区 域 -一 > 
< VlIewW class =“ “photoBox > 
<!- 一 标题 -一 > 
< text > 已 上 传 图 片 历 史记 录 </text > 


i 
< Vlew> 
<block wx:for = '{{historyPhotos}}'wx:key = 'history{{index}}'> 
< image src = '{{item. photoUrl}}'></image > 
</block > 
</view> 
</view> 


17. </view> 


WXSS 文件 (pages/add/add. wxss) 的 完整 代码 如 下 : 


iD 0 


/* 已 上 传 图 片区 域 */ 
. photoBox{ 


margin ~ top: 50rpx; 
display: flex; 
flex— direction: column; 


/ * 标题 样式 * / 
. photoBox text{ 


margin 一 bottom: 30rpx; 
text ~ align: center:; 


. /* 图 片 样式 */ 


. . photoBox imagel{ 


float: left; 
width: 250rpx; 


16 . height: 250rpx; 


17. } 

JS 文件 (pages/add/add.js) 的 完整 代码 如 下 . 
1. const = wx.Ccloud. database( ) 

2. const photos = db.collection( 'photos') 

3. Var app = getApp() 

4. 

5. // 格 式 化 当前 日 期 

6. function formatDate() { 

7. Var now = new Datel() 

8. Var year = now.getFullYearl() 

9 . Var month = now.getMonth() + 1 

10. Var day = now. getDatel( ) 

11. 

1 if (month < 10) month = '0' + month 

13. if (day < 10) day = '0' + day 

14. 

15. return Year + "一 ' 二 month + "一 "二 day 
16. } 

17. 

18. Pagel{ 

19. /xx 

20. * 自 定 义 函 数 -- 上 传 图 片 

21. 关 / 

22. upload: function() { 

23. // 选 择 图 片 

24 wx. ChooseImagel { 

5. count: 1, 

26. sizeType: [ 'compressed'], 

27， sourceType: [ 'album'， 'camera'], 

28. success: function(res) { 

29. //loading 提示 框 表示 正在 上 传 图 片 
30. wx. ShowLoading( { 

31. title: "上传 中 

37. }) 

3 // 获取 图 片 临 时 地 址 

34. const filePath = res.tempEilePaths[0|] 
5, 

36. // 目 定义 云端 的 图 片 名 称 

37. const cloudPath = Math.floor(Math. random() * 1000000) + filePath.match(/AM\.["*.] 
+39 /10] 

38. // 上传 图 片 到 云 存 储 空间 中 

39 . wx. Cloud. uploadFile( { 

40. cloudPath, 

41. filePath, 

42. success: res =>1 

43. // 提 示 上 传 成 功 

44. wx. ShowToast( { 

45. title: "上传 成 功 ! 

46 . duration: 3000 

47. }) 

48. 

49. // 获 取 用 户 个 人 基础 信息 

Su. let UserInfo = app. globalData. userlinfo 
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// 获 取 当 天 日 期 
let today = formatDatel( ) 


// 往 云 数 据 集中 添加 一 条 记录 
photos. add({ 
data: { 
photoUrl: res.filelD, 


avatarUrl: UserInfo. avatarUr|, 


country: userlnfo. country, 
province: userInfo. province., 
nickName: userlnfo. nickNanme., 
addDate: today 

}, 

success: res => { 
console. log(res) 

}, 

fail: ee =>{ 
console. log(e) 


} 
}) 
}, 
fail: ee =>1 
// 提 示 上 传 失 败 


wx. ShowToast( { 
icon: "none ' ， 
title: ' 上 传 失 败 '， 
}) 
} 
}) 
}, 
fail: e => | 
console. error(e) 
}, 
complete: () => { 
// 上 传 完成 后 关闭 loading 提示 框 
wx. hideLoading( ) 
// 更 新 图 片 历史 记录 
this. getHistoryPhotos() 


}) 
}, 
/ 关 关 
x 目 定 义 图 数 -- 获取 已 上 传 图 片 历史 记录 
x / 
getHistoryPhotos: function() 1 
// 获取 当 前 用 户 的 openid 
let openid = app. globalData. openid 


// 从 云 数 据 集 查 找 当 前 用 户 的 上 传记 录 
photos. wherel( { 
_openid: openid 
}).get({ 
success: res => { 
this. setDatal { 
historyPhotos: res. data 


}, 
/ x 
< 生命 周期 图 数 -- 监听 页 面 加 载 
关 1/ 
onLoad: function(options) { 
// 坚 试 输出 用 户 基 础 信息 
/ /console. log(app. globalData. userInfo) 
// 坚 试 输出 用 户 openid 
//console. log(app. globalData. openid) 


// 更 新 图 片 历史 记录 
this. getHistoryPhotos() 


小 程序 UI 组 件 库 . 基于 Vant 
Weapp 的 生日 管家 


为 了 提高 小 程序 的 开发 效率 ,可 以 考虑 使 用 第 三 方 UI 组 件 来 实现 界面 的 视觉 统一 。 开 
发 者 可 以 方便 地 引用 已 经 事先 设计 好 的 目 定 义 组 件 来 快速 搭建 小 程序 页 面 。 本 章 以 有 赞 第 三 
方 UI 组 件 库 Vant Weapp 为 例 ,介绍 了 如 何 使 用 目 定 义 组 件 配合 云 开发 中 的 数据 库 基本 功能 
实现 一 个 生日 管家 小 程序 。 


。 了 解 小 程序 自 定义 组 件 的 概念 ; 
。 掌握 UI 组 件 库 Vant Weapp 的 下 载 和 使 用 ; 


。 掌握 小 程序 云 开 发 中 小 程序 端 数据 库 的 相关 API。 


20.1.1 什么 是 自 定 义 组 件 


从 基础 库 版 本 1. 6. 3 开始 ,小 程序 开始 文 持 简洁 的 组 件 化 编程 。 开 发 者 可 以 将 页 面 内 的 
功能 模块 制作 成 日 定义 组 件 ,以 便 在 不 同 的 页 面 中 重复 使 用 ; 也 可 以 将 复杂 内 容 拆 分 成 右 干 
个 低 帮 合 的 模块 ,这样 有 助 于 代码 的 后 期 维护 。 

例如 , 目前 小 程序 的 原生 组 件 中 是 没有 卡片 组 件 的 ,开发 者 可 以 自行 使 用 图 片 .按钮 .文本 
等 内 容 通 过 样式 布局 组 合成 一 个 商品 展示 卡片 ,然后 日 由 应 用 于 多 个 页 面 上 ,这 种 组 件 就 是 日 
定义 组 件 。 


20.1.2 目 定 义 组 件 的 引用 方式 


如 果 需 要 开发 者 自 定 义 组 件 , 则 需要 为 每 个 组 件 编写 一 套 由 WXML 、WXSS JSON 以 及 
JS 几 个 文件 组 成 的 模板 代码 ,并 且 使 用 前 需要 在 对 应 页 面 的 JSON 文件 中 进行 引用 声明 。 其 
语法 格式 如 下 : 


| 
"usingComponents": { 
"component ~ tag — name" : "path/to/the/custom/component" 
} 
} 


其 中 "component-tag-name" 换 成 日 定义 的 组 件 名 称 ( 也 就 是 未 来 在 页 面 上 引用 的 组 件 标签 
名 )、"path/to/the/custom/component" 换 成 日 定义 组 件 所 在 的 路 径 地 址 即 可 使 用 ， 
在 完成 引用 声明 后 , 自 定 义 组 件 在 使 用 时 与 小 程序 原生 的 基础 组 件 用 法 非常 相似 。 


20.1.3 小 程序 UI 组 件 库 Vant Weapp 


目前 市 面 上 提供 了 一 些 免 费 开 源 的 第 三 方 小 程序 UI 组 件 库 , 可 以 下 载 后 放 到 项 目 文件 
夹 中 直接 使 用 , 比 起 开发 者 从 头 开 始 自 定 义 组 件 更 为 方便 .高 效 。 

这 里 以 有 赞 小 程序 组 件 库 Vant Weapp 为 例 ,从 零 开 始 讲解 如 何 使 用 其 开发 完成 一 款 生 
日 管家 小 程序 项 目 。Vant Weapp 是 一 款 轻 量 、 可 靠 的 小 程序 UI 组 件 库 , 与 有 赞 移动 端 组 件 
库 Vant 基于 相同 的 视觉 规范 ,并 提供 一 致 的 API 接口 ,方便 开发 者 快速 搭建 小 程序 应 用 。 

例如 其 中 的 一 款 卡 片 组 件 < van-card > 就 可 以 实现 如 图 20-1 所 示 的 商品 展示 效果 。 
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图 20-1 Vant Weapp 卡片 组 件 的 展示 效果 


其 官方 文档 地 址 为 “https://youzan. github. io/vant-weapp/#/intro”, 开 发 者 可 以 通过 
查看 文档 了 解 这 些 第 三 方 组 件 的 引用 方式 和 用 法 示例 。 


20.1.4 Vant Weapp 的 下 载 和 安装 


Vant Weapp 有 3 种 安装 方式 ,开发 者 可 以 根据 自己 的 实际 情况 任 选 一 种 。 
方法 一 : 通过 npm 安装 
小 程序 目前 已 经 支持 使 用 npm 安装 第 三 方 包 ,语法 如 下 : 


# npm 
npm 1 vant ~ weapp -5S -— production 


# yarn 
yarn add vant ~ weapp -— production 


这 种 方法 需要 开发 者 对 npm 有 一 定 的 了 解 。 

方法 二 : 通过 git 下 载 源 代码 

开发 者 也 可 以 通过 git 下 载 源 代码 ,并 手动 将 其 中 的 dist 或 lib 文件 夹 复 制 到 项 目 内 的 月 
定义 路 径 地 址 中 , 声 法 如 下 : 


git clone https://github. com/youzan/vant — weapp. git 


这 种 方法 需要 开发 者 对 github 有 一 定 的 了 解 ,最 好 有 有 目 己 的 账号 。 
区 方法 三 : 直接 下 载 源 代码 
如 果 开 发 者 不 太 烈 悉 以 上 两 种 方法 ， 还 可 以 直接 访问 网 页 下 载 凑 代码 ， 解压 缩 后 手动 将 目 
录 中 的 dist 或 lib 复 制 到 项 目 内 的 日 定义 路 径 地 址 中 ,其 官方 的 下 载 访问 地 址 是 https:// 
github. com/youzan/vant-weapp”, 然 后 单 击 右 侧 的 Clone or download 按钮 ,如 图 20-2 所 示 ， 
在 下 拉 列 表 中 单 击 Download ZIP 下 载 压 缩 包 。 


轻 量 、 可 靠 的 小 程序 U[ 组 件 库 https;//youzan.github.io/vant-weapp 


weapP vart ul welxin 
D1097 commits 


Branch: dev < New pull requesi 


rew-zsd docs 出 Pdate charigjelodg Clone with HTTPS ® 


> : Use St or checkout with SYN using the web URL, 
BB .github [docsl: update issue template 3 

本 
i build [new featurel]: compile ess dist | EE 
Wi dist [bulld] 0.5.10 


| docs docs: update changelog 


本 项 目 一 夫 需 要 3 个 页 面 , 即 首页 .好 友信 息 编 辑 页 和 好 友信 息 展 示 页 。 


20.2.1 首页 功能 需求 


首页 功能 再 求 如 下 : 

(1) 首页 震 要 包含 "添加 新 朋友 ” 投 钮 .搜索 框 和 好 友 列 表 。 

(2) 点击 “添加 新 朋友 ”按钮 后 跳 转 到 好 友信 息 编辑 页 ,可 以 录入 数据 ，。 

(3) 搜 款 框 可 以 根据 好 友 姓 名 关键 词 查 找 指定 好 友 。 

(4) 好 友 生 日 列表 需要 展示 好 友 姓 名 、 生 日 .距离 下 个 生日 还 有 多 少 天 ,并 且 点 击 好 友 头 
像 可 以 跳 共 到 好 友信 息 展 示 页 查看 详情 。 


20.2.2 ”好友 信息 编辑 页 功能 需求 


好 友信 息 编 辑 页 功能 需求 如 下 : 

(1) 以 表单 的 形式 要 求 用 户 录 和 人 好 友 的 姓名 、 性 别 . 生 日 .电话 .关系 等 信息 。 
(2)“ 保 存 记 录 ” 按 钮 用 于 添加 或 更 新 好 友 数 据 到 云 数 据 库 中 。 

(3)“ 取 请 修改 ”按钮 用 于 取消 本 次 填 号 ,返回 上 一 页 。 


20.2.3 ”好友 信息 展 示 页 功能 需求 


好 友信 息 展示 页 功能 需求 如 下 : 

(1) 顶端 展示 好 友 的 头像 和 姓名 。 

(2) 中 间 列 表 展 示 好 友 的 性 别 .电话 .和 用 户 本 人 的 关系 .距离 出 生 已 经 多 少 天 .中 离 下 个 
生日 还 有 多 少 天 。 

(3) 下 方 是 “修改 ”按钮 和 “删除 ”按钮 ,分 别 用 于 跳 转 编辑 页 面 和 直接 删除 当前 好 友 。 


20.3.1 创建 云 模板 项 目 


首先 需要 创建 一 个 云 开 发 项 目 , 在 任意 盘 符 下 创建 一 个 空白 文件 夹 (例如 
birthdayMemo) ,然后 填 和 人 AppID 和 选中 “小 程序 。 云 开发 ”, 如 图 20-3 所 示 。 
接着 删除 其 中 无 用 的 模板 代码 : 


本 导入 项 目 


birthdayMemo 
E:Wwxdemo_workspaceibirthdayMemo 


wx19079110a0f01e9d 


车 无 ApplD 可 注册 
或 使 用 测试 号 


加 小 程序 - 云 开发 


小 程序 - 云 并 虚 为 并 点 音 许 代数 搞 库 、 存 储 和 和 去 的 数 等 完 羞 的 到 诺 支持 。 无 壳 撕 
建 腺 务 顺 ,使 用 平台 提供 的 API 进行 核心 业务 开发 ， 即 可 实现 小 程序 快速 上 上 纱 和 
壬 代 。 了 解 详情 


_】 丑 讯 去 


图 20-3 云 模 板 项 目 填写 效果 示意 图 


(1) 删除 cloudFunctions 文件 夹 下 的 默认 云 限 数 login 的 全 部 内 容 。 

(2) 找到 app. json 文件 ,打开 并 删除 其 中 的 页 面 引用 ,只 保留 第 一 个 pages/index/index。 

(3) 打开 硬盘 中 的 pages 文件 夹 ,删除 index 以 外 的 所 有 目录 。 

(4) 进入 index 文件 夹 ,删除 多 余 的 图 片 ,以 及 JS、WXML 和 WXSS 文件 中 的 全 部 代码 
(JS 文件 删除 干净 后 输入 关键 词 page 让 它 日 动 生成 Page(!1 及 图 数 的 相关 代码 )。 

(5) 删除 app. wxss 中 的 代码 。 

(6) 删除 image 文件 夹 中 的 所 有 图 片 。 

(7) 删除 style 文件 来, 此 时 项 目 清 理 全 部 完成 。 


20.3.2 部 蜀 云 数据 库 


具体 操作 如 下 : 
(1) 打开 云 开 发 控制 台 , 创 建 一 个 新 的 数据 集 ,例如 birthday。 
(2) 检查 birthday 数据 集 的 权限 ,确认 是 “ 仅 创 建 者 及 管理 员 可 读 写 ”， 


效果 如 图 20-4 所 示 。 


图 添加 集合 


books 所 有 用 户 可 读 ， 仅 创建 者 及 管理 员 可 写 
适用 场 好 : 用 户 评论 。 用 户 公开 信息 等 
counters 


图 20-4 ”在 云 开 发 控制 台 添加 数据 集 birthday 并 设置 权限 


20.3.3 创建 页 面 文件 


本 项 目 有 3 个 页 面 文件 ,分 别 是 index( 首 页 )、edit( 好 友信 息 编 辑 页 ) 和 
detail( 好 友信 息 展 示 页 )。 打 开 app. json 文件 ,在 pages 属性 中 追加 edit 和 detail 
页 面 的 路 径 描 述 ,如 图 20-5 所 示 。 


eh 


视频 讲解 


保存 后 会 自动 生成 后 面 两 个 页 面 ,此 时 pages 文件 夹 内 部 的 目录 结构 如 图 20-6 所 示 。 


“ [SS pages 

[SS detall 
J9 detailjs 
{} detailjson 
>» Oetallwxml 
ws Oetail,Wxss 

- [SS edit 
J8 editjs 


{} editjson 
<> edit wxml 


ws edit wxss 
“ [BS index 

J3 indexjs 

{】 indexjson 

> indexwaml 


人 
“paEes” [ 
| "pages/index/index", 


"pages/detail/detail", 
"pages/edit/edit" 
ws IMdex Wss 


20-5 在 app.json 中 添加 页 面 配 置 的 代码 20-6 ”页 面 文件 创建 完成 


20.3.4 创建 其 他 文件 


接 下 来 创建 其 他 自 定义 文件 ,本 项 目 还 需要 以 下 3 个 文件 夹 。 

。 images: 用 于 存放 图 片 素材 ,已 存在 ; 

。 utils: 用 于 存放 公共 JS 文件 ,需要 手动 创建 ; 

。 vant-weapp: 用 于 存放 有 赞 UI 库 的 dist 目录 ,需要 手动 创建 。 
文件 夹 名 称 可 以 由 开发 者 自 定义 ,这 里 仅 作 为 示例 参考 。 


添加 图 片 文件 
本 项 目 将 用 到 一 套 动 物 头 像 卡 通 图 标 为 新 增 好 友 随 机 生成 头像 ,图 片 素材 来 源 于 网 络 , 效 


来 如 图 20-7 所 示 。 


(a) 001.Jpg (b) 002.jpg (c) 003.Jpg 


(d) 004.jpg (e) 005.jpg (f) 006.jpg 


(h) 008.Jpg 
图 20-7 图 标 素 材 展示 


右 击 目录 结构 中 的 images 文件 来, 选择 “人 硬盘 打开 ”, 创 建 
二 级 目录 avatar, 并 将 图 片 复制 ,粘贴 进去 。 

创建 公共 JS 文件 

右 击 utils 文件 夹 ,选择 "新 建 ”一 JS, 输 入 utils 后 按 回 车 即 
创建 公共 文件 utils. js。 

添加 UI 组 件 库 


(g) 007 jpg (1) 009.Jpg 


四 cloudfunctions | test 
了 3 miniprogram 
" [SS images 
kb 六 avatar 
™ [SS pages 
bdetall 
b» DD edit 
b DD index 
ES vtils 


右 击 vant-weapp 文件 夹 ,选择 “ 倡 盘 打开 ”, 将 事先 下 载 好 
的 Vant Weapp 组 件 库 源 代码 中 的 dist 目录 复制 ,粘贴 进去 。 
全 部 完成 后 的 目录 结构 如 图 20-8 所 示 。 

此 时 文件 配置 就 全 部 完成 ,20. 4 节 将 正式 进行 页 面 布局 
和 样式 设计 。 


” SS vant-weapp 
bp dist 
JS app. 
{} appjson 
wrss aPD.WSS 
口 README.md 
售 】 projectconfig json 


20-8 完整 目录 结构 创建 完成 


20.4.1 导航 栏 议 计 


et es 
用 户 可 以 通过 在 app. json 中 对 window 属性 进行 重新 配置 来 自 定 义 导 航 Ps 


栏 效果 。 更 改 后 的 app. json 文件 代码 如 下 : 视频 讲解 
1. 1 
2. "pages" : [代码 略 ]， 
3 “Window : { 
4. "navigationBarBackgroundColor” : " # DE6E6D", 
= "navigationBarTitleText": "生日 管家 " 
6. } 
7. } 


上 上述 代 码 可 以 更 改 导 航 栏 背景 色 为 深 粉 色 .字体 为 白色 ,效果 如 图 20-9 所 示 。 
20.4.2 页 面 设 计 


首页 设计 
首页 主要 包含 3 部 分 内 容 , 即 “添加 新 朋友 ”按钮 ,搜索 框 和 好 友 列 表 , 页 
面 设计 如 图 20-10 所 示 。 


好 友 列 表 


图 20-10 ”首页 设计 图 


20-9 ” 自 定义 导航 栏 效 果 


计划 使 用 如 下 组 件 。 
。 按钮 : Vant Weapp 中 的 按钮 组 件 < van-button >; 
。 搜索 框 : Vant Weapp 中 的 搜索 组 件 < van-search >; 
。 好 友 列 表 : Vant Weapp 中 的 卡片 组 件 < van-card >。 
首先 在 JSON 文件 (pages/index/index. json) 中 添加 对 于 第 三 方 组 件 的 引用 声明 : 


时 填写 的 ,后 续 会 换 成 实际 录入 的 好 友信 息 ,并 形成 列表 效果 。 


1. 1 

2. "usingComponents": { 

3. "van - search": "/vant - weapp/dist/search/index", 
4. "van - card" : "/vant - weapp/dist/card/index", 

Se "van - button": " /vant - weapp/dist/button/index" 
6 . } 

7 


WXML(pages/index/index. wxml) 代 码 如 下 : 


<!--“ 汶 加 新 朋友 ”按钮 -一 > 
< van 一 button block type = 'default'> 添 加 新 朋友 </van 一 button > 


<!-- 搜索 框 -一 > 
< van- Search placeholder = "请 输入 搜索 关键 词 " show - action bind: search = "onSearch" bind: 
a = "onCancel" /> 


7 < 一 节 友 列表 ==> 

8. <van— card centered desc= "06-23" title= "小 使 "thumb = "/ images/avatar/001. jpg"> 
9 . < View slot =“footer > 

10. 距离 下 个 生日 

11. < text style = 'color:red;font - weight:bold;'> 100 天 </text > 

12. </view > 

13. </van— card> 


此 时 效果 如 图 20-11 所 示 。 
这 里 的 好 友 姓 名 ,头像 .生日 和 距离 下 次 生日 多 少 天 都 是 为 了 演示 效果 临 国 注 洋 


固 好 友信 息 编 辑 页 设计 YE 
好 友信 息 编辑 页 主要 包含 一 系列 表单 组 件 和 两 个 按钮 。 表 单 组 件 主要 用 ls 
于 填写 好 友 的 姓名 性别. 生日 .电话 和 关系 ,两 个 按钮 分 别 用 于 保存 或 取消 当 定居 


前 登记 的 信息 。 


页 面 设计 如 图 20-12 所 示 。 
由 于 暂时 没有 做 点 击 跳 转 的 逻辑 设计 ,所 以 可 以 在 开发 工具 顶 疹 选择 “普通 编 详 ?下 的 “应 


加 编 详 模式 ”, 添 加 界面 如 图 20-13 所 示 。 


此 时 预览 就 可 以 直接 显示 edit 页 面 了 ,其 他 页 面 也 可 以 这 么 做 ,设计 完毕 后 改 回 "普通 编 


详 "模式 即 可 重新 显示 首页 。 


计划 使 用 < form > 组 件 进行 整体 布局 ,内 部 包含 的 组 件 如 下 。 
。 行 : Vant Weapp 中 的 布局 组 件 < van-row >; 

*。 列 : Vant Weapp 中 的 布局 组 件 < van-col >; 

。 文本 标签 : < label > 组 件 ; 

。 文本 输入 框 : < input > 组 件 ; 

。 单 选 框 : < radio > 和 < radio-group > 组 件 ; 

。 日 期 选择 硕 : < picker > 组 件 ; 


习 请 输入 控 索 关键 词 


小 全 
De-23 


站 怪 存 记录 是 有 按钮 
“取消 修改 按钮 | 


图 20-11 首页 效果 图 图 20-12 ”好 友信 息 编 辑 页 设计 图 


pages/edit/edit 


4 : name=vendorgcolor=black 


Fs 3 和 


[| 下 次 编译 时 模拟 更 新 ( 需 1.9.90 及 以 上 基础 库 版 本 ) 


20-13 添加 edit 页 面 的 编译 模式 


。 按钮 : < button > 组 件 。 
首先 在 JSON 文件 (pages/edit/edit. json) 中 添加 对 于 第 三 方 组 件 的 引用 声明 


{ 
"usingComponents": 1{ 
"van - row": " /vant - weapp/dist/row/index", 
"van - col" : " /vant - weapp/dist/col/index" 
} 


在 WXML 文件 (pages/edit/edit. wxml) 中 添加 < form > 组 件 ,并 在 该 组 件 内 部 使 用 Vant 
Weapp 的 布局 组 件 < van-row > 将 页 面 分 割 成 6 行 ,代码 如 下 : 


1]. <form> 
2 <! 一 一 第 1 行 --> 


< Van 一 DOW > 
<van— col span = "6"></van— col> 
<van— col span = "18"></van— col> 


<! 一 一 第 2 行 一 一 > 


< VanN 一 IOW> 


3 
4 
5 
6 . </van— row> 
7 
8 
9 


10. <van— col span= "6"></van— col > 
11. <van— col span= "18"></van— col> 
12. </van— row> 

13, 

14. <! 一 第 3 行 -- 一 > 

1 < Van 一 TOW > 

16. < Van 一 col span= "6"></van— col> 
17. <van— col span= "18"></van— col> 
18. </van— row> 

19. 

20. <!-- 第 4 行 --> 

21. < Van 一 TOW > 

22. < Van 一 col span= "6"></van— col> 
23, < Van 一 col span= "18"></van— col > 
24. </van— row> 

2 

26. <!-- 第 5 行 --> 

27. < Van 一 IOW > 

28. <van— col span= "6"></van— col > 
29. < Van 一 col span= "18"></van— col> 
30. </van— row> 

了 

32. <!I-- 一 第 6 行 --> 

5 < Van 一 TOW > 

34. <van— col span= "18" offset = "3 "> 
35， </van— col > 

36. <van— col span= "18" offset = "3"> 
:7 </van— col > 

38. </van— row> 

39. 


40. </form> 


其 中 前 5 行 用 于 放置 表单 组 件 ,因此 在 < van-row > 组 件 内 部 再 使 用 < van-col > 组 件 进行 分 割 。 
开发 者 需要 了 解 的 是 < van-row > 组 件 默认 被 平均 分 为 24 个 栅 格 ,因此 可 以 尝试 使 用 span 属 
性 将 < van-col > 再 分 成 6 : 18 的 比例 ,其 中 前 6 格 用 于 放置 文本 标签 ,后面 18 格 用 于 放置 文本 
输入 框 \ 单 选 框 日 期 选择 盘 。 

第 6 行 用 于 放置 两 个 按钮 组 件 , 对 应 的 < van-row > 组 件 内 部 使 用 < van-col > 组 件 分 割 成 
18 个 栅 格 ,并 且 使 用 offset 属性 让 左边 空 3 个 栅 格 ,以 便 按 钮 可 以 居中 显示 。 由 于 第 2 个 按钮 
所 占 的 比例 较 多 ,会 被 挤 到 下 一 行 单独 显示 。 

对 于 上 述 比 例 , 开 发 者 可 以 根据 上 自己 的 喜好 自由 修改 。 

然后 继续 在 < van-col > 组件 中 添加 对 应 的 内 容 , 修 改 后 的 WXML(pages/edit/edit. wxml) 
代码 如 下 : 


1. < torm > 
<!- 一 第 1 行 --> 


< VaAN— IOW> 


<van— col span= “6 > 

< label > 姓名 </label > 
</van— col> 
< Van 一 Col span= 18 > 


< input name = 'name' placeholder = ' 请 输入 姓名 "></input > 


</van— col > 
</ Van 一 TOW > 


<!- 一 第 2 行 --> 
< Van 一 TOW > 
< Van 一 Col span= 6 > 
< label > 性 别 </ label > 
</van 一 col > 
<Van 一 Col Span= 18 > 
< radio - group name = gender > 
< radio color = '# DE6E6D' value = '1' /> 里 
< radio color = '#DE6E6D' value = '2' /> 女 
</radio - group > 
</van— col> 
</van— row> 


<!- 一 第 3 行 --> 
< Van 一 TOW >> 
< Van 一 Col span= "6"> 
< label > 生日 </label > 
</ van 一 Col > 
<van- col span = "18"> 
< picker name = 'birthday' mode = 'date'> 
<view>{{date} }</view > 
</picker > 
</van— col> 


</ Van 一 TOW > 


<!- 一 第 4 行 --> 
< Van 一 TOW >> 
< Van 一 Col span= 6 > 
< label > 电话 </ label > 
</van 一 col > 
< Van 一 Col Span= 18 > 


< input name = 'tel' type = 'number' placeholder = ' 请 输入 联系 电话 '></input > 


</van— col > 
</ Van 一 IOW> 


<!-- 第 5 行 --> 
< Van 一 TOW > 
< Van 一 Col span= 6 > 
< label > 关系 </ label > 
</van— col > 
<Van 一 col Span= 18 > 


< input name = 'relationship' placeholder = ' 描 述 你 们 的 关系 '></input > 


</van— col > 
</van— row> 


<!- 一 第 6 行 --> 


58. 
59. 
60. 
61. 
02. 
b3. 
64. 
65 . 
be6. 


< VanNn— 工 口 W > 


< Van 一 Col span= "18" offset = “3 > 
< button > 保存 记录 </button > 


</van— col > 


<Van 一 col span= "18" offset= 3 > 


< button > 取消 修改 </button > 


</van— col > 
</van — row > 


67，</form > 


WXSS(pages/edit/edit. wxss) 代 码 如 下 : 


] 
2 
3 
4. 
ns 
6 
7 
8 
9 


/* 行 布局 */ 

van— row { 
margin: 20rpx 20rpx; 
text ~ align: center; 


/ * 文本 标签 * / 

label { 
padding: 10rpx; 
color: # DE6E6D:; 
line— height: 80rpx.; 


/* 文本 输入 框 */ 
input { 
border: lrpx solid # DE6E6D; 
width: 480rpx; 
height: 80rpx; 
border — radius: 20rpx; 


/* 单 选 框 组 */ 
radio — group { 
width: 480rpx; 
J]ine ~ height: 80rpx; 


/* 单 选 框 x*/ 
radiol{ 


margin: 0 20rpx; 


/日 期 选择 毅 中 的 view*/ 


. picker view { 


width: 480rpx; 
line ~ height: 80rpx; 


/x* 按钮 */ 


. button { 


margin: 20rpx; 


42. background — color: # DE6E6D; 
43. color: White; 
44. } 


为 了 进行 样式 效果 的 预 宛 , 还 需要 在 JS 文件 的 data 中 录入 日 期 选择 兹 的 提示 语句。 
JS(pages/edit/edit. js) 代 码 片 段 如 下 : 


Pagel { 


/ x 


* 页 面 的 初始 数据 


1 
2 
3 
4. 
5 data: { 
6 
1 
8 


}) 


当前 效果 如 图 20-14 所 示 。 

由 图 可 见 , 此 时 可 以 显示 完整 的 样式 效果 。 

好 友信 息 展 示 页 设计 

好 友信 息 展 示 页 用 于 给 用 户 浏 览 好 友 详 细 信 息 , 需 要 用 户 点 击 首页 的 好 
友 列 表 , 然 后 在 新 窗口 中 打开 该 页 面 。 好 友信 息 展示 页 包括 好 友 的 头像 、 姓 
名 性别、 生日 .电话 、 关 系 、 距 离 出 生 的 天 数 、 距 离 下 个 生日 的 天 数 , 以 及 “ 修 
改 ” 按 钮 和 “删除 ”按钮 。 

页 面 设计 如 图 20-15 所 示 。 


点 击 设置 生日 


请 输入 联系 电话 


揪 述 你 们 的 关系 


FFic 录 ”距离 出 生 已 经 N 天 
距离 下 个 生日 还 有 N 天 


“修改 ” 按 久 
“删除 ”按钮 


图 20-14 好 友信 息 编辑 页 效果 图 图 20-15 ”好 友信 息 展示 页 设计 图 


计划 将 整个 页 面 分 为 3 个 部 分 ,解释 如 下 ， 
。 顶 端 头像 和 姓名 : < image > 和 < view > 组 件 ; 
。 中 间 个 人 信息 数据 : Vant Weapp 中 的 单元 格 组 件 < van-cell-group > 和 < van-cell >; 


。 压 部 的 两 个 按钮 ;: Vant Weapp 中 的 按钮 组 件 < van-button >。 
首先 在 JSON 文件 (pages/detail/ detail. json) 中 添加 对 于 第 三 方 组 件 的 引用 声明 ; 


2. usingComponents : { 

3. "van -~ button" : " /vant - weapp/dist/button/index", 

4. "van - cell": "/vant - weapp/dist/cell/index", 

“内 "van - cell - group": " /vant - weapp/dist/cell - group/ index" 
7. } 


WXML(pages/ detail/ detail. wxml) 代 码 如 下 : 
<!-- 顶端 头像 和 姓名 --> 


1 

2 <Vlew Class = ‘avatarBox'> 

3 < image src = '/images/avatar/001. jpg'></image > 
4 <view> 测 试 好 友 </view > 

5. </view> 
6 
7 
8 
9 


<!- 一 个 人 信息 展示 -一 > 
< Van 一 Cell 一 group > 
. < van- cell title= "性 别 " value = " 女 " /> 
10. <van— cell title=" 咎 日 " value="1991-10- 10" /> 
11. <van- cell title= "电话 " value = "1234567" /> 
12. <van- cell title= "关系 " value= "同学 " /> 
13. <van- cell title= "距离 出 生 已 经 ”" value= "10076 天 " /> 
14. < van- cell title= "距离 下 个 生日 还 有 " value= "50 天 " /> 
15. </van— cell— group> 


17. <!-- 按钮 区 域 --> 
18. < van - button block type = 'warning'> 修 改 </van - button > 
19. < van - button block type = 'danger'> 删 除 </van 一 button > 


WXSS(pages/ detail/ detail. wxss) 代 码 如 下 : pr 


/* 头像 和 姓名 区 域 * / 
. aVatarBox1{ 
display: flex; 
flex— direction: column; 


align— items: center:; 


} 7 


/x* 头像 图 片 */ 了 = 1991-10-10 


.avatarBox imagel 1234567 
10. width: 200rpx; 


iD 搬 


11. height: 200rpx; 

12. margin: 20rpx; 

13， | 

14. 

15. / 关 姓 名 关 / 

16. .avatarBox Viewf{ 

17. margin 一 bottom: S50Orpx; 
18， | 


当前 效果 如 图 20-16 所 示 。 20-16 ”好 友信 息 展 示 页 效果 图 


由 疼 可 见 , 此 时 可 以 显示 好 友信 息 展 示 页 的 完整 样式 效 朱 。 由 于 疝 未 获得 实际 录入 云 数 
据 库 的 好 友信 息 ,当前 仅 供 作为 样式 参考 。 
此 时 页 面 布 局 与 样式 设计 就 已 完成 ,20. 5 节 将 介绍 如 何 进 行 逻 辑 处 理 。 


20.5.1 公共 逻辑 


网 utils.js 文件 逻辑 
在 公共 JS 文件 (utils/utils. js) 中 添加 月 定义 图 数 getToday, 用 于 获取 当 
前 格式 化 日 期 ,相关 函数 代码 如 下 : 


1. // 获 取 当 前 格式 化 日 期 

2. function getToday( ){ 

3. // 获 取 当 前 日 期 对 象 

4. Var now = new Datel ) 

5. // 获 取 当 前 年 份 (4 位 数 ) 

6. Var y = now.getFullYearl() 

F // 获 取 当 前 月 份 

8. var m = now.getMonth() + 1 
9. // 获 取 当 前 日 期 

10. Var d = now. getDate() 

11. // 格 式 化 当天 日 期 

上 > var today = y+ '/"+m+ '/"+d 
13. 

14. return today 

15. } 


在 公共 JS 文件 (utils/utils. js) 中 添加 日 定义 孙 数 getFullYear, 用 于 获取 当前 年 份 (4 位 
数 ) ,相关 国 数 代码 如 下 : 


1. /获取 当前 年 份 (4 位 数 ) 

2. function getFullYear() | 

3. // 获 取 当 前 日 期 对 象 

4. Var now = new Datel ) 

5. // 获 取 当 前 年 份 (4 位 数 ) 
6. Var y = now.getFullYear() 
1. 

8. return y 

9.  } 


在 公共 JS 文件 (utils/utils. js) 中 添加 自 定义 函数 dateDiff, 用 于 计算 两 个 日 期 之 间 的 天 


1. // 计 算 天 数 差 

2. function dateDiff(sDatel, sDate2) { 

3 sDatel = sDatel. replace(/- /g, '/'") 

4. sDate2 = sDate2. replace(/- /g, '/'") 

5 Var oDatel = new Date( sDatel ) 

6 Var oDate2 = new Date( sDate2) 

7 var iDays = parselInt( (oDate2 — oDatel) / 1000 / 3600 / 24) 


在 


// 把 相差 的 侣 秒 数 技 换 为 天 数 


return iDays 


公共 JS 文件 (utils/utils. js) 中 添加 自 定 义 了 负数 getNextBirthday, 用 于 计算 当前 日 期 中 
离 下 个 生日 还 有 多 少 天 ,相关 图 数 代码 如 下 : 


// 计算 距离 下 个 生日 还 有 多 少 天 
function getNextBirthday(b davy) { 


} 


// 获 取 当 前 日 期 


Var today = getToday!() 


// 获 取 当 前 年 份 


Var yY = getFullYearl() 


// 计 算 日 期 差 


var n = dateDiff(today, y + '- ' 二 b dav) 


// 今 年 生日 已 经 过 完了 
if tn<0) { 

// 获 得 明年 年 份 

y+ 十 

// 计 算 日 期 差 

n = dateDiff(today, y + '—'+ b day) 
} 


returnn 


最 后 需要 在 utils. js 中 使 用 module. exports 语句 暴露 图 数 出 口 ,代码 片段 如 下 : 


1 
2 
3 
4. 
3 
6 


module. exports = { 


} 


getToday :getToday, 
getFullYear:getFullYear, 
dateDiff: dateDiff, 
getNextBirthday: getNextBirthday 


现在 就 完成 了 公共 逻辑 处 理 的 部 分 ,还 需要 分 别 在 首页 (index) 和 好 友信 息 展 示 页 
(Cdetail) 的 JS 文件 顶端 引用 这 个 公共 JS 文件 ,引用 代码 如 下 : 


var utils = require('../../utils/utils. js') /7 引用 公共 Js 文件 


需要 注意 小 程序 在 这 里 暂时 还 不 文 持 绝对 路 径 引 用 ,只 能 使 用 相对 路 径 

加 云 数 据 库 逻辑 

在 首页 (index)、 好 友信 息 编 辑 页 (edit) 和 好 友信 息 展 示 页 (detail) 的 JS 
文件 顶端 都 需要 追加 对 云 数据 库 的 声明 ， 和 


1; 
2. 


好 友信 息 


const db = wx.cloud. databasel ) 
const birthday = db.collection( 'birthday ") 


此 时 这 3 个 页 面 的 JS 文件 均 可 以 访问 云 数据 库 中 的 birthday 数据 集 了 。 
20.5.2 好 友信 息 编 辑 页 逆 辑 


搞 辑 页 (edit) 有 两 种 进入 渠道 ,一 是 点击 站 页 的 “添加 新 朋友 ”按钮 打开 ,此 时 和 需 


要 录入 全 新 的 数据 ; 二 是 点 击 好 友信 息 展示 页 (detail) 的 “修改 ”按钮 打开 ,此 Plies: 


时 需要 展示 当前 好 友 的 信息 ,并 允许 用 户 进行 修改 。 


加 更 新 生日 数据 3 
当前 的 日 期 选择 器 是 暂时 无 法 将 选择 的 日 期 显示 在 页 面 上 的 ,因此 需要 加 
对 其 进行 修改 。 视频 讲解 


WXML(pages/edit/edit. wxml) 代 码 上 请 段 修改 如 下 : 


1 < form> 

z 

3 

4 <! 一 一 第 3 行 --> 

2. < Van 一 IOW > 

6 < Van 一 Col span= “6 > 

7 < label > 和 牛 日 </1abel > 

8 </van— col> 

9. < Van 一 Col span= 18 > 

10. < picker name = 'birthday' mode = "date'" bindchange = 'dateChange' value = '{{date}}'> 
11. <view>{{date} }</view > 
12. </picker > 

9， </van 一 Col > 

14. </van— row> 

15. 

16. 


17. a > 


在 edit. ]s 文件 的 Page() 内 部 追 加 dateChange 疯 数 ， 代码 片段 如 下 : 


*x 肯定 义 图 数 -- 更 新 页 面 上 显示 的 出 生日 期 
x/ 
dateChange: function(e) { 
this. setDatal { 
date: e. detail. value 
}) 
}, 


此 时 页 面 效 果 如 图 20-17 所 示 。 
申 图 可 见 , 此 时 已 经 可 以 获取 日 期 选择 硕 中 的 数据 并 显示 在 页 面 上 。 接 加 Bp 


0] 


下 来 将 分 别 考 虑 录入 新 朋友 信息 和 修改 已 存在 朋友 信息 两 种 情况 。 eT 
国 录入 新 朋友 信息 bn 
假设 当前 是 点 击 首页 的 “添加 新 朋友 "按钮 跳 转 而 来 ,修改 edit 页 面 的 编 。 四 中 

译 模式 并 携带 参数 id 二 new 表示 新 朋友 ,如 图 20-18 所 示 。 ee 
可 以 在 edit js 文件 的 onLoad 函数 中 获取 该 参数 ,代码 片段 如 下 ; 

1. / x 

; * 生命 周期 图 数 -- 监听 上 页面 加 载 
3. x 

4. onLoad: function(options) { 

5. // 获 取 携 市 的 参数 id 

6 . let id = options. 1d 

7. // 更 新 id 数据 

8 . this. setData({ id: id }) 

3 |， 


2019-05-12 


请 输入 联系 电话 


描述 你 们 的 关系 


(a) 点 击 修改 生日 (b) 生日 更 新 后 的 页 面 显示 
图 20-17 ”生日 数据 更 新 效果 图 


Edit 
pages/edit/edit 
id=new 


me, 


[| | 下 次 编译 时 模拟 困 新 ( 裔 1.9.90 及 以 上 基础 库 版 本 ) 


| 四 3 


20-18 修改 edit 页 面 的 编译 模式 


为 < form > 组 件 添加 表单 提交 事件 ,并 为 其 中 的 “保存 记录 ”按钮 添加 form-type 属性 。 
WXML(pages/my/my. wxml) 代 码 片 段 修改 如 下 : 


< form bindsubmit = ‘onSubmit'> 


1 

2 

3 

4 <! 一 一 第 6 行 --> 

es <Van— row> 

6 <van— col span= "18" offset = "3"> 

7 < button form - type = 'submit > 保存 记录 </button > 
8 </van— col> 

9. < Van 一 Col span= "18" offset = "3"> 

10. < button > 取消 修改 </button > 


11. </van— col> 
12. </van— row> 
13. </form> 


在 edit. js 文件 的 Page() 内 部 追加 onSubmit 负数 ,代码 厂 段 如 下 : 


1. / ¥¥ 

2. *x 目 定 义 函 数 -- 提交 表单 数据 

3. x/ 

4. onSsubmit: function(e) { 

5. // 获取 表单 中 提 区 的 全 部 数据 

6 . let info = e.detal1. value 

7. 

8. /7/ 奶 加 一 个 不 市 年 份 的 生日 信息 

9 . let date = info. birthday. substring(5) 


info. date = date 


// 获 取 好 友 id 
let id = this. data. id 


// 添 加 新 朋友 
if(id == 'new') 1 
// 随机 选择 一 个 头像 
let i = Math.ceil(Math. random() * 9) 
info. avatar = '/images/avatar/00' + i + '.jpg' 


PP 
避让 


21. // 往 云 数 据 库 中 添加 当前 好 友信 息 
22. birthday. add( { 

23. data: info, 

24. success: res =>1 

25. /7/ 成功 后 返回 首页 
26. wx. navigateBack( ) 
7 本 

28. fail: err => { 

29. // 失 败 提示 

30. wx. ShowToast( { 

31. title: ' 保 存 失 败 '， 
32. }) 

33. } 

34. }) 

35. } 

36. // 好 友 已 存在 

37. else { 

38. // 暂 不 填写 

39. } 

40. 本 


此 时 页 面 效 果 如 图 20-19 所 示 。 

由 图 可 见 , 目 前 已 经 成 功 录 入 数据 到 云 数据 库 中 。 开 发 者 可 以 多 录入 几 
条 测试 数据 ,用 于 后 续 首 页 的 好 友 列 表 展 示 。 

修改 当前 好 友信 息 

假设 当前 是 点 击 好 友 展 示 页 的 “修改 ?按钮 跳 转 而 来 ,修改 edit 页 面 的 编 
译 模 式 并 携带 参数 id= _id 表示 已 录入 过 的 朋友 ,如 图 20-20 所 示 。 

需要 注意 的 是 ,这 里 的 _id 属性 值 仅 为 参考 效果 ,开发 者 在 云 数 据 集中 可 


记录 列表 索引 管理 权限 设置 


十 添加 记录 。 十 导入 ( json 或 csv ,最 大 50M ) 个 


1997-07-01 
”由 -ee309928ucd97e09118441f512262392 


12345 
”Openid -ocXJVAWWCOQ6SCCASUpOruNJbwfU 


"avatar imagesjavatanr009.jpg 
"birthday 1997-07-01 


"date 07-01 


(a) 好人 测试 数据 (b) 好 和 成功 后 去 数据库 中 的 显示 效 末 
图 20-19 录入 新 朋友 信息 


edit 


pagesiedit/edit 


id=ee3099285cd97e09118441512262292 


其 1 人 


[| 下 次 编译 时 模拟 更 新 ( 需 1.9.90 及 以 上 基础 库 版 本 ) 


ms | BE 
图 20-20 ”修改 edit 页 面 的 编译 模式 


以 查 到 ,从 中 选择 任意 一 条 记录 进行 使 用 即 可 模拟 跳 转 效果 。 
在 edit. js 文件 的 onLoad 函数 中 根据 id 参数 的 取 值 获取 好 友信 息 ,代码 片段 如 下 : 


1. / x 

2 * 生命 周期 函数 -监听 页 面 加 载 
c 关 / 

4. onLoad: function(options) { 

5. // 获 取 携 带 的 参数 id 

6. let id = options. id 

7. // 更 新 id 数据 

8. this. setData({ id: id }) 

9. 

10. // 如 果 好 友 已 存在 

11. if (id!= 'new') { 

12. // 根 据 好 友 id 从 云 数据 库 中 获取 好 友信 息 
13. birthday. doc(id). get({ 

14. success: res => 1 

15. this. setDatal( { 

16. info: res. data, 

17. date: res. data. birthday 


22. |}, 


然后 将 获取 到 的 数据 展示 在 页 面 中 ,WXML(pages/edit/edit. wxml) 代 码 片 段 修改 如 下 : 


1 < form bindsubmit = ‘onSubmit'> 
和 <!- 一 第 1 行 --> 

3 < Van 一 DOW > 

4 . < Van 一 col span= 6 > 

5. < label > 姓名 </label > 

6 </van— col> 

7 < Van 一 col span= “18 > 

8 < input name = 'name' placeholder = ' 请 输入 姓名 ' value = '{{info. name}}'></input > 
9. </van 一 col > 

10. </van— row> 


11. 

12. <!- 一 第 2 行 --> 

13. <Van— row> 

14. <van— col span="6"> 

15. < label > 性 别 </label > 

16. </van— col > 

17. <Van 一 col span= “18 > 

18. < radio ~ group name = ‘gender > 

19. < radio color = '# DE6E6D' value = '1' checked = '{{info. gender == 1}}' /> 男 
20. < radio color = '# DE6E6D' value = '2' checked = '{{info. gender == 2}}' /> 女 
21. </radio — group > 

22. </van— col > 

23. </van— row> 

24. 

25. <!-- 第 3 行 (代码 略 ) -一 > 

26. 

27. <l 一 一 第 4 行 一 一 > 

28. < Van 一 TOW > 

29. <Van 一 col Span= 6 > 

30. < label > 电话 </label > 

31. </van— col> 

32, <van— col span= 18 > 

33. < input name = 'tel' type = 'number' placeholder = ' 请 输入 联系 电话 ' value = '{{info. tel}}'> 
</input > 

34. </van— col > 

35. </van— row> 

36. 

37. <!-- 第 5 行 --> 

38.， < Van 一 TOW > 

39. < Van 一 col span= "6"> 

40. < label > 关系 </label > 

41. </van— col > 

42. <van— col span="18"> 

43. < input name = 'relationship' placeholder = ' 描 述 人 你们 的 关系 ' value = '{{info. 
relationship}}'></input > 

44. </van— col> 

45. </van— row> 


46. 


信息 修改 的 相关 代码 。 


47. <!-- 第 6 行 ( 代 码 略 ) -一 > 
48. </form> 


此 时 的 页 面 已 经 可 以 显示 当前 的 好 友信 息 了 ,如 图 20-21 所 示 。 
在 edit. js 文件 中 修改 onSubmit 函数 ,补充 关于 好 友 


对 应 的 JS(pages/my/my.js) 代 码 片 段 如 下 : 


1. / #x 

< 目 定 义 函数 一 -提交 表单 数据 F OS 女 
3 x/ 

4. onSubmit: function(e) { 1990-01-01 
5 芝 

6 . 

7 /7 添加 新 朋友 

8. if (id == "new') { 

9 本 

10. } 

11. // 好 友 已 存在 保存 记录 

12. else { 

13. // 根 据 好 友 id 更 新 数据 

14. birthday. doc( id). updatel( { 

15. data: info, 

16. success: res => { 

// 成 功 后 返回 上 一 页 

18. wx. navigateBack( ) 

19. }, 20-21 显示 当前 好 友信 息 
20. fail: err =>{ 

21. // 失败 提示 

22. wx. ShowToast( { 

23. title: ' 保 存 失 败 '， 

24. }) 

4 } 

26. }) 

27. } 

2 J 


现在 尝试 修改 当前 好 友信 息 并 提交 保存 ,页 面 效 果 如 图 20-22 所 示 。 

此 时 查看 云 数据 库 对 应 的 记录 ,会 看 到 数据 已 经 被 更 新 。 

取消 修改 并 返回 上 一 页 

如 朵 不 布 望 修改 数据 ,可 以 点 击 “ 取 请 修改 ”按钮 停止 当前 操作 并 返回 上 


为 “取消 修改 ?按钮 添加 点 击 事件 , WXML (pages/edit/edit. wxml) 代 码 


片段 修改 如 下 : 


< form bindsubmit = ‘onSubmit'> 


1 

2 

3 

4 < 一 第 和 行 = 一 > 

hs < Van 一 IOW > 

6 < Van- col span= "18" offset = "3"> 

7 < button form— type = 'submit > 保存 记录 </button> 
8 </van 一 col > 

9 < Van 一 col span= "18" offset = “3"> 


1997-07-01 : 2019-07-10 


12345 


取 衣 修改 


(a) 初始 好 友信 息 (b) 修改 好 友 生 日 后 
图 20-22 ”修改 当前 好 友信 息 
10. < button bindtap = 'cancelEdit'> 取 衣 修 改 </button > 
11. </van— Col > 
1 之 . </van— row> 
13. </form> 


然后 在 对 应 的 edit. js 文件 中 添加 cancelEdit 函数 的 内 容 , 代 码 片 段 如 下 : 


1. Pagelf{ 

2 / x 

3. * 自 定 义 函 数 -- 取消 修改 并 返回 上 一 页 
4. x*/ 

5. cancelEdit: function() { 

6. wx. navigateBack( ) 

7. }, 

8. 7) 


当前 还 不 能 真 的 返回 上 一 页 ,需要 等 待 其 他 页 面 的 对 应 逻辑 代码 完成 后 才 可 以 。 
5s.3 首页 逻 香 

首页 (index) 主要 有 4 个 功能 需要 实现 ， 

。 点 击 顶 部 的 “添加 新 朋友 ”按钮 可 以 跳 转 edit 页 面 录入 好 友信 息 ; 
。 展 示 好 友 列 表 ; 


。 点 击 好 友 列 表 跳 转 新 页 面 展示 好 友 具 体 信息 ; 
。 搜 索 好 友 关键 词 。 


20 


加 跳 转 添加 新 朋友 页 面 ee 
修改 顶部 “添加 新 朋友 ”按钮 的 代码 ,为 其 添加 点 击 事件 addFriend, 用 于 ”人 “并 站 入 
跳 转 新 页 面 。 


相关 WXML(pages/index/index. wxml) 代 码 片 段 如 下 : 


1. <!-- “添加 新 朋友 ?按钮 -一 > 
2. <van— button block type = 'default' bindtap = 'addFriend'> 添 加 新 朋友 </van button > 


在 JS 文件 中 添加 日 定义 函数 addFriend, 相 关 JS(pages/index/index.js) 代 人 码 厂 上段 如 下 : 


1. Pagel({ 

2 / 

3 x*x 自 定 义 函 数 -- 添加 好 友信 息 
4 x/ 

5 addFriend: function(options) { 

6. let id = ‘new 

7 wx. navigateTo( { 

8 url: '../edit/edit?id= ' + jd 
9. }) 

10. 小 
11. }) 

此 时 页 面 效 果 如 图 20-23 所 示 。 


似 请 柱 入 讲 寄 关键 间 


9 z 
06-23 
点 击 设置 生日 


| 描述 你 们 的 关系 | 


(a) 页 面 初 始 效 未 (b) 点 击 “ 添 加 新 朋 去 7" 按 钳 号 榜 新 页 面 
图 20-23 “添加 新 朋友 ”按钮 点 击 效 果 


展示 好 友 列 表 

在 JS 文件 中 创建 getFriendsList 函数 用 于 获取 云 数 据 库 中 的 好 友 列 表 ， 
按照 出 生日 期 升序 排列 ,并 需要 对 该 数据 进行 后 续 处 理 ( 追 加 距离 下 个 生日 的 
天 数 显 示 )。 

相关 JSCpages/index/index. js) 代 码 片 段 如 下 . 


1. Pagelf{ 

2 / 

3. < 自 定义 函数 -- 获取 好 友 列 表 

4. x/ 

= getFriendsList: function() { 

6. // 查 找 好 友 列 表 , 按照 出 生日 期 升序 排列 


Fe birthday. orderBy( 'date', "asc ') .get({ 
success: res => 1 


9. this. processDatal(res. data) 

10. } 

Ts }) 

12. J 

13. 

14. / 

15. x 自 定义 函数 -- 处 理 数据 (计算 距离 下 个 生日 的 天 数 ) 
16. x*/ 

了 了。 processData: function(list) { 

18. for (var i = 0; i < list. length; I++) { 
19. // 获 取 不 市 年 份 的 生日 

20. let date = list[i].date 

2 // 计 算 相 差 几 天 

22. let n = utils.getNextBirthday(date) 
23. list[i]l.n = n 

24. } 

25. 

26. this. setDatal( { 

27. friendsList: list 

28. }) 

29. 上 

30. }) 


相关 WXML(pages/index/index. wxm]) 代 码 片 段 修改 如 下 : 


1. <!-- 好 友 列 表 一 -> 
2. <block wx:for= '{{friendsList}}'wx:key= '{{item. id}}'> 


3. <van— card centered desc = ({{ 人 (item. date)}} title= {{item.name}} thumb— class = 
"test" thumb = "{{item.avatar}}"> 

4. <vVview slot = footer > 

5. 距离 下 个 生日 

6. < text style = 'color: red; font 一 weight: bold; > 

{{item. n}} 天 </text > 

7. </View> 

8. </van— card> 

9. </block > 


此 时 页 面 效果 如 图 20-24 所 示 。 

最 好 在 JS 文件 的 onShow 中 也 调用 一 下 getFriendsList 
靖 数 ,以便 添加 新 朋友 后 返回 可 以 直接 更 新 看 到 最 新 好 
友 列 表 。 相 关 JS (pages/index/index. js) 代 码 厂 段 
如 下 H 


Pagel { 
基准 
* 生命 周期 图 数 -- 监听 页 面 显 示 
关 1 
onShow: function() { 
// 获 取 好 友 列 表 
this. getFriendsList() 
1 
1) 20-24 ”首页 好 友 列 表 加 载 效果 展示 


点 击 跳 转 好 友信 息 展 示 页 

可 以 修改 < van-card> 组 件 ,使 得 用 户 点 击 好 友 头 像 即 可 跳 转 新 页 面 。 
相关 WXML(pages/index/index. wxml) 代 码 片 段 修改 如 下 : 

1. <!- 一 好 友 列 表 -一 > 

2. <block wx:for= '{{friendsList}}'wx:key= '{{item. id}}'> 


3. < Van — Card centered desc = "{{(item. date)}}"” title = "{{item. name}}" 
thumb - link = '../detail/detail?id= {{item. id}}&n2 = {{item.n}}' thumb = "{{item.avatar}}"> 


4 <View Slot = "footer'> 

5 距离 下 个 生日 

6. < text style = 'color:red;font — weight:bold;'>{{item. n}} 天 </text > 
7 </view> 

8 </van— card> 

9. </block> 


此 时 已 经 可 以 点 击 跳 转 到 detail 页 面 , 并 且 成 功 携 市 了 好 友 的 id 和 距离 下 个 生日 还 有 mn 
天 这 两 个 数据 ,但 是 仍 需 在 detail 页 面 进行 携带 数据 的 接收 处 理 才 可 显示 正确 的 内 容 。 

关键 词 搜索 功能 [a 机 ri 

在 JS 文件 中 添加 关键 词组 件 < van-search > 的 onSearch 和 onCancel 事件 te ; 
的 具体 内 容 。 

相关 JS(pages/index/index. js) 代 人 码 厂 段 修改 如 下 : 


视频 讲解 
1. / x 
2. * 月 定义 孔 数 --- 取 请 搜索 
3. 关 / 
4. onCancel: function(e) { 
5. // 获 取 好 友 列 表 
6 . this. gqetEriendsList() 
}, 
8. 
9. / 尖 关 
10. * 日 定义 函数 -- 搜索 关键 词 
11. 关 / 


12. onSearch: function(e) { 
1 // 获 取 搜 索 关 键 词 


14. let keyword = e. detail 

15. 

i6. // 使 用 正则 表达 式 模 糊 查 询 

17. birthday. wherel { 

18. name: db. RegExp({ 

19. regexp: keyword, 

20. options: "1 工 ， 

21. }) 

22. }).orderBy( 'date', 'asc').get({ 
3 success: res => { 

24. this. processDatal(l res. data) 
25. } 

260. }) 

27. } 


此 时 在 首页 搜索 框 中 尝试 输 入 关键 词 进 行 搜 索 ,会 看 到 筛选 后 符合 条 件 的 好 友 列 表 。 
运行 效果 如 图 20-25 所 示 。 
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(a) 输入 关键 词 (b) 搜索 结果 fo) 取消 搜索 
图 20-25 ”关键 词 搜索 效果 展示 


20.5.4 好友 信息 展 示 页 逆 辑 


好 友信 息 展示 页 (detail) 主要 有 两 个 功能 需要 实现 ,一 是 显示 对 应 新 闻 ; 二 是 点 击 新 闻 底 
部 按钮 可 以 添加 /取消 新 闻 收藏 

有 显示 当前 好 友信 息 

假设 当前 是 点 击 首页 好 友 列 表 中 的 某 个 好 友 头 像 跳 转 而 来 ,修改 detail 注 六 晶 策 

页 面 的 编译 模式 并 携带 参数 id 和 n2 分 别 表示 当前 好 友 的 _id 以 及 距离 下 个 国 时 SE 沽 

生日 的 天 数 , 如 图 20-26 所 示 。 视频 讲解 

需要 注意 的 是 ,这 里 的 id 和 n2 属性 值 仅 为 参考 效果 。 其 中 id 取 值 可 以 
由 开发 者 在 云 数据 集中 查 到 ,从 中 选择 任意 一 条 记录 进行 使 用 即 可 模拟 跳 转 效果 。 


站 


detail 


pages/detall/detall 


id=ee3099285cd97e091184411512262a92&n2=49 


Ea Eh 


_| 下 次 编译 时 模拟 覃 新 ( 需 1.9.90 及 [以 上 基础 库 版 本 ) 


20-26 ”修改 detail 页 面 的 编译 模式 


可 以 在 JS 文件 的 onLoad 哺 数 中 分 别 获取 从 首页 传 来 的 参数 id 和 n2, 并 更 新 到 页 面 数据 
中 。 相 关 JS(pages/detail/ detail. js) 代 码 片 段 如 下 : 


1. Page({ 

2 / x 

3 * 生命 周期 图 数 -- 监听 页 面 加 载 

4 关 1/ 

5 onLoad: function(options) { 

6 // 获 取 从 首页 传 来 的 参数 

7 let id = options. id // 好 友 id 
8 let n2 = options.n2 // 距 离 下 个 生日 的 天 数 
9. 

10. // 更 新 页 面 数 据 

Ts this. setDatal( { 

12. id: id, 

13. n2: n2 

14. }) 

15. Fs 

16. }) 


然后 在 JS 文件 的 onShow 了 苑 数 中 根据 好 友 id 查找 云 数 据 库 ,获取 当前 好 友信 息 。 
相关 JS(pages/ detail/ detail. js) 代 码 上 搬 段 如 下 ， 


1. Pagel{ 

2 /xx 

3 < 生命 周期 图 数 -- 监听 页 面 显 示 
4. X / 

局 onShow: function() { 

6 // 获 取 当 前 好 友 id 

1 let id = this. data. id 

8. 

9. // 从 云 数 据 库 中 查找 当前 好 友信 息 
10. birthday. doc(id).get({ 

11. success: res => { 

12. // 获 取 当 前 日 期 

13. let today = utils.getToday() 
14. 

15. // 获 取 生 日 ( 带 年 份 ) 

16. let b day = res.data. birthday 
17. 

18. // 计算 距离 出 生 的 天 数 

19. let nl = utils.dateDiff(b day, today) 
20. 

21. // 更 新 页 面 数 据 

22. this. setDatal( { 

23. info: res. data, 

24. nl: nl 

25. }) 

26. } 

a7 1 

28. }, 

29. 用) 


最 后 修改 WXML 页 面 ,相关 WXML(pages/detail/ detail. wxml) 代 码 片 段 如 下 : 
<! 一 一 顶端 头像 和 姓名 -一 > 


<Vlew Class = 'avatarBox'> 


<view>{{info.name}}</view> 


1 
2 
3. < image src = '{{info. avatar}} '></image> 
4 
5,. </view> 


6 

7. <:-- 个 人 信息 展示 --> 

8. <van- cello— group > 

9. <van— cell title= "性 别 " value = "{{info.gender == 1?' 男 ': ' 女 '}}" /> 
10. <van- cell title= "生日 " value = "{{info.birthday}}" /> 

11. <van- cell title= "电话 " value = "{{info.tel}}" /> 

12. <van cell title= "关系 " value = "{{info. relationship}}" /> 

13. <van- cell title= "距离 出 生 已 经 "” value = "{{nl1}} 天 " /> 

14. <van- cell title= "中 离 下 个 生日 还 有 " value = "{{n2}} 天 " /> 

15. </van— cell ~ group > 


此 时 重新 从 首页 点 击 好 友 头 像 跳 转 就 可 以 发 现 已 经 能 够 正确 显示 对 应 的 好 友信 息 了 。 
运行 效果 如 图 20-27 所 示 。 


2015-08-30 


23456 


(a) 首页 好 友 列 表 (b) 点 击 好 友 头 便 盘 看 证 全 
20-27 ”在 首页 点 击 好友 头 像 跳 转 显示 好 友 详 情 的 效果 
修改 好 友信 息 


首先 要 为 “修改 "按钮 添加 点 击 事件 ,点 击 后 跳 转 好 友信 息 编 辑 页 。 
WXML(pages/ detail/ detail. wxml) 代 码 片 段 修 改 如 下 : 


1. <!-- 按钮 区 域 --> 
2. <van- button block type = "warning' bindtap = 'editFriend'> 修 改 </van - button 视频 讲解 

> 

3. <van— button block type = 'danger'> 删 除 </van - button > 

在 detail. js 文件 中 添加 editFriend 一 数 , 用 于 携带 好 友 ID 信息 并 跳 转 好 友信 息 编辑 页 。 
对 应 JS(pages/detail/ detail. js) 中 的 itFriend 函数 的 代码 片段 修改 如 下 : 

1. Page(l{ 


2 . / 关 基 
3. x* 自 定 义 函 数 -- 编辑 好 友信 息 


友 记 录 。 


4 关子 

5 editFriend: function( ) { 

6. // 获 取 当 前 好 友 id 

7. let id = this. data. id 

8 // 跳 转 到 编辑 页 面 并 携 市 参数 id 
9. wx. navigateTol( { 

10. url: '../edit/edit?id=' + id 
11. }) 

12. }， 

13。 月 


现在 笠 试 点 击 “ 修 改 ” 按 钮 ,可 以 成 功 携 市 好 友 ID 跳 转 到 好 友 编 辑 页 (edit) 。 
此 时 页 面 效 末 如 图 20-28 所 示 。 
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(a) 好 友信 筷 展示 页 (b) 点 击 “ 修 改 ” 按 钮 跳 转 编辑 页 
20-28 ”好 友信 息 展 示 页 中 “修改 ”按钮 的 使 用 效果 


删除 当前 好 友 
首先 要 为 “删除 ”按钮 添加 点 击 事件 ,点 击 后 直接 从 云 数 据 库 中 删除 此 好 


WXML(pages/ detail/ detail. wxml) 代 码 片 段 修改 如 下 : 


1. <! 一 按钮 区 域 --> 

2. <van— button block type= 'warning' bindtap = 'editFriend'> 修 改 </van button > 
3. <van- button block type = 'danger' bindtap = 'deleteFriend'> 删 除 </van 一 button > 
在 detail. js 文件 中 添加 deleteFriend 函数 ,用 于 根据 好 友 ID 删除 指定 记录 。 
对 应 JS(pages/ detail/ detail. js) 中 的 deleteFriend 图 数 的 代码 片段 修改 如 下 : 


1. Page({ 

2 / ¥¥ 

< < 自 定 义 国 数 -- 删除 好 友 
4 */ 

本 deleteFriend: function() { 


6. // 获 取 当 前 好 友 id 

7. let id = this. data. id 

8. 

9. // 删 除 当 前 好 友 

10. birthday. doc( id). removel { 
11. success: res => { 

1 // 删 除 成 功 后 返回 上 一 页 
13。 wx. navigateBack!( ) 

14. } 

15. }) 

16. 上 ， 

17. }) 


此 时 重新 从 首页 点 击 任 意 好 友 头 像 跳 转 到 好 友信 息 展 示 页 ,人 然后 尝 斌 点击“ 删除” 按钮 即 
可 删除 当前 好 友信 息 并 返回 首页 了 。 
运行 效果 如 图 20-29 所 示 。 
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(a) 首页 初始 效果 (b) 好 友信 息 展 示 页 (c) 删除 好 友 后 的 百 页 效果 
图 20-29 删除 指定 好 友 效 果 展 示 


20.6.1 应 用 文件 代码 展示 


app. json 文件 的 完整 代码 如 下 : 


{ 
“pages : | 
"pages/ index/ index", 
"pages/detail/detail", 
"pages/edit/edit" 
]， 
“Window : { 


"navigationBarBackgroundColor" : " # DE6E6D", 


C0] 


20. 


9 . 
10. 
11. 


app.js 文件 的 完整 代码 如 下 (创建 项 目 时 自动 生成 ): 


1 
2 
3 
4 
3 
06. 
1 
8 
9 
1 


0. 
11. 
12. 
13. 
14. 


0. 2 


"navigationBarTitleText": "生日 管家 " 


} 
} 


App( 1 


onLaunch: function() { 


if (lwx.cloud) { 


console. error( ' 请 使 用 2.2.3 或 以 上 的 基础 库 以 使 用 云 能 力 ') 
} else { 


wx. Cloud. init( { 


}) 
} 


traceUlser: true, 


this. globalData = 1{} 


} 
}) 


公共 图 数 文件 代码 展示 


JS 文件 (utils/utils. js) 的 完整 代码 如 下 : 


// 获 取 当 前 格式 化 日 期 
function getToday( ){ 
// 获 取 当 前 日 期 对 象 
Var now = new Datel( ) 
// 获 取 当 前 年 份 (4 位 数 ) 
Var yY = now.getFullYeart{) 
// 获 取 当 前 月 份 
Var m = Dow. getMonth( ) + 1 
// 获 取 当 前 日 期 
Var d = now. getDatel( ) 
// 格 式 化 当天 日 期 
var today =y+ '/"+m+ '/"+d 


DO 


> 
bE 


i 十 
(i 


24. 


return today 


. } 


. // 获 取 当 前 年 份 (4 位 数 ) 
，function getFullYear() { 


// 获 取 当 前 日 期 对 旬 
Var now = new Date() 
// 获 取 当 前 年 份 (4 位 数 ) 


Var y = now,getEullYear( ) 


return vy 


.} 


sDatel 
sDate2 


. // 计 算 天 数 差 
, function dateDiff(sDatel, sDate2) { 


sDatel. replace(/- /g, '/') 
sDate2. replace(/ - /g, ‘'/') 


20. 


.} 


Var oDatel = new Datel( sDatel ) 

Var oDate2 = new Datel( sDate2) 

var iDays = parselInt((oDate2 - oDatel) / 1000 / 3600 / 24) 
// 把 相差 的 至 秒 数 转 换 为 天 数 


return iDays 


. // 计 算 距 离 下 个 生日 还 有 多 少 天 


.| 


. function getNextBirthday(b day) { 


// 获 取 当 前 日 期 
Var today = getToday( ) 


// 获 取 当 前 年 份 
Var y = getFullYear() 


// 计算 日 期 差 
varn = dateDiff(today, y + '- ' + b day) 


/ /今年 生日 已 经 过 完了 
if (nn<0) { 
// 获 得 明年 年 份 
V++ 
// 计 算 日 期 差 
n = dateDiff(today, y + '—-'+ b day) 


returnn 


. module. exports = 1 


getToday :getToday, 
getFullYear:getFullYear, 
dateDiff: dateDiff, 
getNextBirthday: getNextBirthday 


6.3 页面 文件 代码 展示 


首页 代码 展示 
JSON 文件 (pages/index/index. json) 的 完整 代码 如 下 : 


下 


{ 


} 


"usingComponents": { 
"van— search": "/vant — weapp/dist/search/index", 
"van— card": "/vant — weapp/dist/card/ index", 
"van - button" : "/vant - weapp/dist/button/index" 
} 


WXML 文件 (pages/index/index. wxml) 的 完整 代码 如 下 : 


1 
2 
3. 
4 


<!--“ 添 加 新 朋友 ”按钮 -一 > 


< van— button block type = 'default' bindtap = 'addEriend'"> 添 加 新 朋友 </van - button > 


<!-- 搜索 框 -一 > 


5. <van- search placeholder = "请 输入 搜索 关键 词 " show - action bind: search = "onSearch" bind: 
cancel = "onCancel”" /> 

6. 

7. <! 一 -好 友 列 表 一 -> 

8. <block wx:for= '{{friendsList}}'wx:key= '{{item. id}}'> 


9 . < Van 一 card centered desc = "{{(item. date)}}" title = "{{item. name}}" thumb— link = ../ 
detail/detail?id= {{item. id}}&n2 = {{item.n}}' thumb= "{{item.avatar}}"> 

10. < View slot= "footer’'> 

314， 距离 下 个 生日 

12. < text style = 'color:red;font — weight:bold;'>{{item. n} } 天 </text > 

13. </view> 

14. </van 一 card> 

15, </block> 


JS 文件 (pages/index/index. js) 的 完整 代码 如 下 : 
var utils = require('../../utils/utils. js') 
const db = wx.cloud. databasel ) 
const birthday = db. collection( 'birthday') 


1] 

2 

3 

4. 

5. Page({ 
6 

7 

8 

9 


/ xx 
* 目 定 义 困 数 -- 添加 好 友信 息 
x/ 
| addFriend: function(options) { 
10. let id = 'new' 
11. wx. navigateTo( { 
url: '../edit/edit?id=' + id 
13. }) 
14. } ， 
15. 
16. /xx 
7 * 自 定义 函数 -- 取消 搜索 
18. */ 


19. onCancel: function(e) | 
20. // 获 取 好 友 列 表 


21， this. getFriendsList() 

2 }, 

23. 

24. /x¥ 

25. < 月 定义 函数 -- 搜索 关键 词 
26. x*x/ 


27. onSearch: function(e) { 


28. // 获 取 搜 索 关键 词 


29. let keyword = e. detail 

30. 

31. // 使 用 正则 表达 式 模 糊 查 询 

32. birthday. where{ { 

33. name: db. RegExp( 1 

34. regexp: keyword, 

35. options: "1'", 

36. }) 

37. }).orderBy( 'date', ‘asc').get({ 
38. success: res => { 

39. this. processDatal(l res. data) 


40. } 


42. }， 

43. 

A4. /x¥x 

45. x 月 定义 函数 -- 获取 好 友 列 表 
46. x 


47. getFriendsList: function() { 

48. // 查 找 好 友 列 表 , 按 照 出 生日 期 升序 排列 
49 . birthday. orderBy( 'date', 'asc').get({ 
50 . success: res => { 

51., this. processDatal(res. data) 


时 }) 
54. 1 


56. /xx 

57. * 月 定义 函数 --- 处理 数 据 ( 计 算 距 离 下 个 生日 的 天 数 ) 
58. x 

59. processData: function(1ist) { 


60. for (var 1 = 0; < list.length; i++) { 
61. // 获 取 不 带 年 份 的 生日 

62. let date = list[i]. date 

63. // 计 算 相 差 几 天 

64. Jet n = utils.getNextBirthday(date) 
65. list[il.n = n 

66. } 

67. 

68. this. setDatal { 

69. friendsList: list 

了 0。 月 

71. }, 

VE 

73. /x*¥ 

74. x 生命 周期 函数 --- 监听 页 面 显 示 

75. 关 1/ 


76 . onShow: function() { 

了 了. // 获 取 好 友 列 表 

78. this. getFriendsList() 
79. Ta 

80. }) 


好 友信 息 编辑 页 代码 展示 
JSON 文件 (pages/edit/edit. json) 的 完整 代码 如 下 : 


} 


1. 1 

2. "usingComponents": { 

3. "van— row": "/vant — weapp/dist/row/index", 
4. "van— col": "/vant - weapp/dist/col/index" 
hs 

6. 


} 
WXML 文件 (pages/edit/edit. wxml) 的 完整 代码 如 下 : 
1]. <form bindsubmit = ‘onSubmit'> 


2 <! 一 一 第 1 行 --> 


了 3， < Van 一 TOW > 


4. < Van 一 col span="6"> 

< label > 姓名 </label > 

6. </van 一 col > 

7. <van— col span= “18 > 

8. < input name = 'name' placeholder = ' 请 输入 姓名 ' value = '{{info. name}}'></input > 
9. </van 一 col > 

10. </van— row> 

11. 

12. <! 一 一 第 2 行 一 一 > 

13. < Van 一 TOW > 

14. <van— col span= "6"> 

15. < label > 性 别 </label > 

16. </van— col > 

17. < Van 一 col span="18"> 

18. < radio — group name = “gender > 

19. < radio color = '# DE6E6D' value = '1' checked = '{{info. gender == 1}}' /> 男 
20. < radio color = ' 井 DE6E6D' value = '2' checked = '{{info. gender == 2}}' /> 女 
21. </radio — group > 

22， </van 一 Col > 

23. </van— row> 

24. 

25. “一 一 第 3 行 = 一 > 

26. < Van 一 TOW > 

2 了 <van— col span= 6 > 

28. < 1abel > 生日 </label > 

29 . </van 一 Col > 

30. <Van 一 col span= 18 > 

31. <picker name = 'birthday' mode = 'date' bindchange = 'dateChange' value = '{{date}}'> 
32. <view>{{date} }</view > 

C 人 殉 </picker > 

34. </van— col> 

5 </van— row> 

36. 

37. <!- 一 第 4 行 --> 

389, < Van 一 TOW > 

39. < Van 一 col span= "6"> 

40. < 1abel > 电话 </1Label > 

41. </van— col> 

42. < Van 一 col span= 18 > 

43. < input name = 'tel'type = 'number' placeholder = ' 请 输入 联系 电话 ' value = '{{info. tel}}'> 
</input > 

44. </van— col > 

45. </van— row> 

46. 

47. <!- 一 第 5 行 - 一 > 

48 . < Van 一 TOW > 

49 . < Van 一 Col span= “6 > 

50. < label > 关系 </label > 

51. </van 一 Col > 

52. <van— col span= 18 > 

53. < input name = 'relationship' placeholder = ' 描 述 你 们 的 关系 ' value = '{{info. 
relationship}} '></input > 

54. </van— col> 

Ss </van— row> 


56. 


57. 
58. 
9 
60. 
61. 
062. 
63. 
64. 
65 . 
6b6. 
67. 


<!- 一 第 6 行 --> 
< Van 一 TOW > 
<van— col span= "18" offset = "3"> 
< button form— type = 'submjt'> 保 存 记 录 </button > 
</van 一 col > 
< Van 一 col span= "18" offset = “3 > 
< button bindtap = 'cancelEdit'> 取 衣 修 改 </button > 
</van— col > 
</ Van 一 TOW > 


</ form > 


WXSS 文件 (pages/edit/edit. wxss) 的 完整 代码 如 下 ; 


1 
2 
3 
4. 
ss 
6 
7 
8 
9 


/x 行 布局 */ 
van— row { 
margin: 20rpx 20rpx; 
text ~ align: center; 
} 


/ * 文本 标签 * / 
label | 
padding: 10rpx; 
color: # DE6E6D; 
line ~ height: 80rpx; 
} 


. /x* 文 本 输入 框 */ 


input { 
border: lrpx solid # DE6E6D; 
width: 480rpx; 
height: 80rpx; 
border - radius: 20rpx; 
} 


. /< 单 选 框 组 * / 


. radio — group { 


width: 480rpx; 
lJine ~ height: 80rpx; 
} 


. /* 单 选 框 x*/ 


. radiol 


margin: 0 20rpx; 
} 


. /* 日 期 选择 硕 中 的 viewx / 


. picker view { 


width: 480rpx; 
line— height: 80rpx; 
} 


. /* 按 钮 x*/ 
. button { 


margin: 20rpx; 
background — color: # DE6E6D; 


43. 
44. 


color: white; 


} 


JS 文件 (pages/edit/edit. js) 的 完整 代码 如 下 : 


1 
2 
3 
4 
了 
6 
7 
8 
9 


10. 
11. 
12. 
13 
14. 
1 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
23, 
24. 
二 
26 . 
27, 
28. 
29. 
30. 
上 
:并 
3 
34. 
Ce 
36. 
了 了 。 
38. 
39. 
40. 
41. 
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const db = wx.cloud. database() 
const birthday = db.collection('birthday') 


Pagel { 
/ xx 
* 页 面 的 初始 数据 
x/ 
data: { 
date: ' 点 击 设置 生日 ' 
}, 


/ ¥¥ 
x*x 月 定义 函数 -里 新 页 面 上 显示 的 出 生日 期 
x/ 
dateChange: function(e) { 
this. setDatal { 
date: e. detail. value 
}) 
}, 


/ ¥¥ 
* 月 定义 函数 -- 提交 表单 数据 
关 / 

onSubmit: function(e) { 
// 获 取 表 单 中 提交 的 全 部 数据 


let info = ee,detallL.value 


// 追 加 一 个 不 市 年 份 的 生日 信息 
let date = info. birthday. substring(5) 
lnfo. date = date 


// 获 取 好 友 id 
let id = this. data. id 


// 读 加 新 朋友 

if (id == mew') { 
// 随 机 选择 一 个 头像 
let i = Math.ceil(Math. random() * 9) 
info. avatar = '/images/avatar/00' + i + '.jpg' 


// 往 云 数据 库 中 添加 当前 好 友信 息 
birthday. add( { 
data: info, 
success: res => { 
// 成 功 后 返回 首页 
wxX. navigateBack( ) 
}, 
fail: err => { 
// 失 败 提示 
wx. ShowToast( { 
title: ' 保 存 失 败 '"， 


S53. } 

54. }) 

a } 

56. // 好 友 已 存在 

57. else { 

58. // 根 据 好 友 id 更 新 数据 
59. birthday. doc( id). update( { 
60. data: info, 

61. success: res => { 

62. // 成 功 后 返回 上 一 页 
63. wx. navigateBack( ) 
64. }, 

65 . fail: err => { 

66. // 失 败 提 示 

67. wx. ShowToast( { 

68. title: “保存 失败 '， 
69. }) 

70. } 

71, }) 

Ts } 

73. 本 

74. 

15. /x 


76. * 自 定 义 函 数 -- 取消 修改 并 返回 上 一 页 
TT x 
78. cancelEdit: function() { 


79. wx. navigateBack( ) 
80. |}, 

81. 

82. /x¥ 


83. < 生命 周期 图 数 -- 监听 页 面 加 载 
84. x/ 
85. onLoad: function(options) { 


86. // 获 取 携 带 的 参数 id 


87. let 1d = options. 1d 

88. // 更 新 id 数据 

89. this. setDatal { 

90. id: id 

91. }) 

92. 

93. // 如果 好 友 已 存在 

94. if (id != "new') { 

95. // 根 据 好 友 id 从 云 数据 库 中 获取 好 友信 息 
96. birthday. doc(id). get({ 

97. success: res =>1 

98. this. setDatal { 

99. info: res. data, 

100. date: res. data. birthday 
101. }) 

102. } 

103. }) 

104. } 

105 bs 


好 友信 息 展示 页 代码 展示 
JSON 文件 (pages/detail/ detail. json) 的 完整 代码 如 下 : 


1. 1 

# "usingComponents": { 

3. "van ~ button": "/vant — weapp/dist/button/ index", 

4. "van— cell": "/vant ~ weapp/dist/cell/index", 

Dl "van— cell — group": "/vant — weapp/dist/cell - group/ index" 
6. } 

Le 


WXML 文件 (pages/detail/ detail. wxml) 的 完整 代码 如 下 : 
<! 一 一 顶端 头像 和 姓名 -一 > 


1 

2 <Vlew class = ‘avatarBox'> 

3 < image src = '{{info. avatar} } '></image > 

4 <view>{{info.name}}</view> 

5. </view> 

6 

7. <! 一 -个 人 信息 展示 -一 > 

8. <van— cell ~ group > 

9. <van— cell title= "性 别 " value = "{{info. gender == 1?' 男 ':' 女 '}}" /> 
10. <van— cell title= "生日 " value = "{f{info. birthday}}" /> 

11. <van- cell title= "电话 " value = "{{info. tel}}" /> 

12. <van- cell title= "关系 " value = "{{info. relationship}}" /> 
13. <van- cell title= "距离 出 生 已 经 ”value= "{{n1}} 天 " /> 

14. <van- cell title= "距离 下 个 生日 还 有 "value="{{n2}} 天 " /> 
15. </van - cell ~ group > 


17，<!-- 按钮 区 域 -一 > 
18. < van - button block type = 'warning' bindtap = 'editFriend'> 修 改 </van - button > 
19. < van - button block type = 'danger' bindtap = 'deleteFriend'> 删 除 </van - button > 


WXSS 文件 (pages/detail/detail. wxss) 的 完整 代码 如 下 : 


1. /x 头像 和 姓名 区 域 * / 
2. .avatarBox{ 

证 display: flex; 

4. flex— direction: column; 
Ss align ~ items: center; 
6. } 

7. 

8. /x 头像 图 片 */ 

9. .avatarBox imagel 

10. width: 200rpx; 

11. height: 200rpx; 

12. margin: 20rpx; 

13. 】} 

14. 

15. /x* 姓 名 x*/ 


16. .avatarBox view!{ 
17. margin — bottom: S50Orpx; 
18. | 


JS 文件 (pages/ detail/ detail. js) 的 完整 代码 如 下 : 


1. const utils = require('../../utils/utils. js') 
2. const+ = wx. Cloud. databasel ) 

3. const birthday = db.collection( 'birthday') 
4. 

5. Pagel{ 

6. / x 

7. * 目 定 义 范 数 -- 编辑 好 友信 息 
8. *x/ 

9. editFriend: function() { 

10. // 获 取 当 前 好 友 id 

11. let id = this. data. id 

和 // 跳 转 到 编辑 页 面 并 市 参数 id 
13. wx. navigateTol( { 

14. url: '../edit/edit?id=' + jd 
15. }) 

16. bs 

17. 

18. /xx 

19. * 日 定义 函数 -- 删除 好 友 

20. x 

21. deleteFriend: function() { 

时 // 获 取 当 前 好 友 id 

Pe let id = this. data. id 

24. 

25. // 删 除 当前 好 友 

26 . birthday. doc( id). removel( { 

27. success: res => { 

28. // 删 除 成 功 后 返回 上 一 页 
29. wx. navigateBack( ) 

30. } 

31. }) 

32. }, 

33. 

34 . / ¥¥ 

35. * 生命 周期 函数 -监听 页 面 加 载 
36. */ 

37. onLoad: function(options) { 

38. // 获 取 从 首页 传 来 的 参数 

39 . let id = options. id / 7/ 好友 id 
40. let n2 = options. n2 // 距 离 下 个 生日 的 天 数 
41. 

42. // 更 新 页 面 数据 

43. this. setDatal { 

44. id: id, 

由 5 . n2: nz 

46 . }) 

47. }s 

48. 

49. /xx 

50. * 生命 周期 函数 一 -监听 页 面 显示 
51., 关 / 


5 2. onShow: function() { 
53. // 获 取 当 前 好 友 id 
54. let id = this. data. id 


56. 


// 从 云 数 据 库 中 查找 当前 好 友信 息 
birthday. doc(1d). get({ 
success: res => { 
// 获 取 当 前 日 期 
let today = utils. getToday() 
// 获 取 生 日 ( 带 年 份 ) 
let b day = res. data. birthday 
// 计 算 距 离 出 生 的 天 数 
let nl = utils.dateDiff(b day, today) 


// 更 新 页 面 数据 
this. setDatal { 


}) 


info: res. data, 


nl: nl 


服务 怖 部 和 


每 一 个 小 程序 在 与 指定 域名 地 址 进行 网 络 通信 前 都 必须 将 该 域名 地 址 添加 到 管理 员 后 人 台 


白 名 单 中 。 


A.1.1 配置 流程 
小 程序 开发 者 登录 mp. weixin. qq. com 进入 管理 员 后 台 , 单 击 “设置 ?下 的 “开发 设置 ,在 
“服务 器 域名 ”下 添加 或 修改 需要 进行 网 络 通信 的 服务 器 域名 地 址 ,如 图 A-1 所 示 。 
人。 微 信 公 众 平台 | 小 程序 


设 兽 


直率 座 置 是 三 方 酌 和 沙 接口 如 置 再 点 者 工具 
ge es 


国 世 今 已 


日 
并 
© 
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A-1 服务 器 域名 配置 


开发 者 可 以 填 入 自己 或 第 三 方 的 服务 器 域名 地 址 ,但 在 配置 时 需要 注意 以 下 几 点 : 

(1) 域名 只 支持 HTTPS (request, uploadFile、 downloadFile) 和 WSS (connectSocket) 
协议 。 

(2) 域名 不 能 使 用 IP 地 址 或 localhost 

(3) 域名 必须 经 过 ICP 备案 。 

(4) 出 于 安全 考虑 ,api. weixin. qq. com 不 能 被 配置 为 服务 融 域 名 ,相关 API 也 不 能 在 小 
程序 内 调用 ,开发 者 应 将 AppSecret 保存 到 后 台 服 务 器 中 ,通过 服务 器 使 用 AppSecret 获取 


人 DO 附 录 A， 服 务 器 部 署 区 


AccessToken, 并 调用 相关 API。 

(5) 每 类 接口 分 别 可 以 配置 最 多 20 个 域名 。 

配置 完 之 后 髓 登录 小 程序 开发 工具 就 可 以 测试 小 程序 与 指定 服务 兹 域名 地 址 之 间 的 网 络 
通信 情况 了 ,注意 每 个 月 只 可 以 申请 修改 5 次 。 


A.1.2 HTTPS 证 书 


需要 注意 的 是 ,小 程序 必须 使 用 HTTPS 请 求 , 普 通 的 HTTP 请 求 是 不 能 用 于 正式 环境 
的 。 判 断 HTTPS 请 求 的 依据 是 小 程序 内 会 对 服务 器 域名 使 用 的 HTTPS 证 书 进 行 校 验 , 如 
果 校 验 失 败 , 则 请 求 不 能 成 功 发 起 。 

因此 开发 者 如 果 选 择 目 己 的 服务 需 需 要 在 服务 套 上 上 月 行 安 闻 HTTPS 证 书 , 选 择 第 三 方 
服务 硕 则 需要 确保 其 HITPS 证 书 有 效 。 小 程序 对 证 书 的 要 求 如 下 : 

(1) HTITPS 证 书 必 须 有 效 , 证 书 必 须 被 系统 信任 ,部 团 SSL 证 书 的 网 站 域名 必须 与 证 书 
颁发 的 域名 一 致 :证 书 必 须 在 有 效 期 内 。 

(2) iOS 不 文 持 目 签 名 证 书 。 

(3) 10S 下 证 书 必 须 满 足 笠 果 App Transport Security (ATS) 的 要 求 。 

(4) TLS 必须 支持 1.2 及 以 上 版 本 ,部 分 旧 Android 机 型 还 未 支持 TLS 1. 2, 请 确保 
HTTPS 服务 器 的 TLS 版 本 支持 1.2 及 以 下 版 本 。 

(5) 部 分 CA 可 能 不 被 操作 系统 信任 (例如 Chrome 56/57 内 核对 WoSign、StartCom 证 
书 限制 ) ,请 开发 者 在 选择 证 书 时 注意 小 程序 和 各 系统 的 相关 通告 。 

由 于 系统 限制 ,不 同 平台 对 于 证 书 要 求 的 严格 程度 不 同 。 为 了 保证 小 程序 的 兼容 性 ,建议 
开发 者 按照 最 高 标准 进行 证 书 配 置 ,并 使 用 相关 工具 检查 现 有 证 书 是 否 从 合 要 求 。 


A.2.1 软件 部 署 


硅 开 发 者 条 件 受 限 , 可 以 将 个 人 计算 机 临时 部 署 为 模拟 服务 右 进 行 开发 和 测试 。 小 程序 
对 服务 旨 端 没有 软件 和 语言 的 限制 条 件 , 用 户 可 以 根据 目 己 的 实际 情况 选择 Apache、 Ngnix、 
Tomcat 等 任意 一 鞭 服 务 需 软件 进行 安装 部 署 , 以 及 选用 PHP、Node. js、J2EE 等 任意 一 种 语 
言 进行 后 端 开 发 。 

这 里 以 phpStudy 2016 套装 软件 (包含 了 Apache 和 了 PHP) 为 例 , 部 署 步 骤 如 下 : 

(1) 下 载 安 闻 包 , 在 本 地 计算 机 中 双击 安放 。 

(2) 完成 后 局 动 Apache 十 MySQL 服务 ,局 动画 面 如 图 A-2 所 示 。 

此 时 模拟 服务 冀 束 已 经 局 动 ,打开 浏 窟 冀 在 地 址 栏 中 输入 “http://localhost”, 如果 可 以 
访问 成 功 ( 如 图 A-3 所 示 ) ,说 明 Apache 和 PHP 已 经 开始 工作 了 。 

将 页 面 往 下 翻 到 “MySQL 数据 库 连 接 检测 ?版 块 , 数 据 库 的 初始 用 户 名 和 密码 均 为 root， 
输入 后 单 击 "“MySQL 数据 库 连接 检测 ”按钮 进行 检测 (如 图 A-4 所 示 )。 

此 时 如 果 连 接 成 功 会 出 现 图 A-5 的 提示 ,说明 MySQL 数据 库 可 以 正常 使 用 了 。 

需要 注意 的 是 ,部 分 计算 机 在 安 沪 局 动 时 会 提示 缺少 某 版 本 的 Visual C++ 库 。 使 用 的 
PHP 版 本 和 运行 库 的 对 照 天 系 如 下 : 


phpstudy 2016 
hpstudy 局 停 


停止 


运行 模式 一 一 了 iE 版 本 
个 系统 服务 
全 非 服务 模式 


应 用 | 


从 其 他 选项 菜单 


A-2 ”模拟 服务 器 启动 状态 


ee cn 
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| 合理 号 二 相 admn@phpsudy.net 2 | Dsjphpstudy WWW php 


| 


| Core bemath calendar GEYEE dste ereg filter ftp hash iconw jaonm merypt 3EE 
(adhe pere Reflection gessicn stanmiard myadqind tokenizer zip zlib Llibzml dam ED kez 

Sep larkL wddx whl mlreudar celuritar Bpachaahandloer Bier curl eon dotnat gd miatring misql mosqli 
| Pdo_myagl Pio sqlite sqlites ralme msl mhash 


一 想 过 节 狂 欢送 府 礼 


夯 着 Pih 国 jupviet 国 训 pr 国手 到 手相 


not 硅 轴 晤 页 _ phagstudy 抱 守 


PHPE 关 汪 数 
| PHPE ( phpinfo) : 
| PHP 运 行 方式 : 


PH 县 本 【PhP_warslonm】 : 
膀 本 占用 野 坟 内 看 【rmermgry_ir 直 ) 


PHP 安全 榜 式 [5 人 _ modey : 

| 上传 训 村 是 大 限制 (upload_rrax_fiespe ) : 
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| pHpmR 目 巡 {doc_root ] : 

| 听 开 (enable_dl) : 

| 时 错误 信息 [depiay_ TO) + 

数据 到 判 杠 起 式 【mac NEES CC] : 
| de 1 
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A-3 本 地 页 面 访问 成 功 
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A-4 _ MySQL 数据 库 连 接 检测 


加 -OF-| 


localhost 显示 : 
连接 到 MySq 路 据 库 正常 


图 A-5 MySQL 数据 库 连 接 正 常 提示 消息 


运行 


(1) PHP 5. 3,PHP 5.4 和 Apache 都 是 用 VC9 编译 ,计算 机 必须 安装 VC9 运行 库 才 能 


(2) PHP 5.5、PHP 5.6 是 用 VC11 编译 ,如 用 PHP 5.5、PHP 5.6 必须 安装 VC11 运行 库 。 


(3) PHP 7.0,PHP 7. 1 是 用 VCl14 编译 ,如 用 PHP 7.0、PHP 7.1 及 以 上 版 本 必须 安装 


VC14 运行 库 。 


A.2.2 网 络 请 求 


服务 天安 疫 路 径 下 的 WWW 目录 就 是 根 目录 , 它 的 网 络 地 址 是 http://localhost/” 或 
“http://127. 0.0.1/”。 开 发 者 可 以 在 根 目录 下 自行 创建 目录 和 文件 ,例如 在 miniDemo 中 创 
建 了 test. php 文件 ,那么 网 络 请 求 地 址 就 是 “http://localhost/miniDemo/test. php”。 


PHP 文件 的 返回 语句 是 echo, 例 如 : 


1. 二 ?php 
到 echo “网络 请 求 成 功 ! 
3. 了 了 


这 样 小 程序 将 会 收 到 引号 里 面 的 文字 内 容 。 
开发 者 也 可 以 直接 用 浏览 瘟 访 问 该 地 址 ,能 获得 同 
样 的 文字 内 容 , 因 此 可 以 在 开发 之 前 直接 使 用 浏览 
傣 测 试 PHP 文件 是 否 正确 。 

需要 注意 的 是 ,本 地 模拟 服务 需 地 址 只 能 用 于 
学 习 或 测试 阶段 , 带 有 无 效 域 名 的 小 程序 是 无 法 正 
式 发 布 上 线 的 。 未 来 在 正式 服务 带 域 名 配置 成 功 
后 ,建议 开发 者 更 新 网 络 请 求 地 址 并 在 各 平台 下 进 
行 测 试 ,以 确认 服务 带 域 名 配置 正确 。 


A.2.3 ” 跳 过 域名 校 验 


如 果 开 发 者 暂时 无 法 登记 有 效 域 名 ,可 以 在 开 
发 和 测试 环节 暂时 跳 过 域名 校 验 。 具 体 做 法 是 在 
微 信 web 开发 者 工具 中 单 击 右 上 角 的 “详情 ” 按 
钮 ,然后 勾 选 “不 校 验 合法 域名 、web-view (业务 域 
名 )、TLS 版 本 以 及 HTTPS 证书 ”选项 ,如 图 A-6 

此 时 ,在 开发 者 工具 中 运行 或 开启 手机 调试 模 
式 时 都 不 会 进行 服务 硕 域名 的 校 验 。 


@ 代码 小 实验 


AppID Wx190 Mii e3a 

本 地 目录 。。”C\ 二 种 铺 华 出 版 社 \ 微 信 小 程序 入 门 ..， 打 开 
文件 系统 C.\ AppDatavLocah 投 信 .， 打开 
本 地 代码 21KB 

上 次 预览 8 KB ( 上 星期 五 16:14 ) 


上 次 上 传 ”无 


n= 


ES6 转 ES5 


时 上 传代 码 时 样式 自动 补 全 


加 代码 上 传 时 自动 压缩 


， 不 校 验 合法 域名 、web-view ( 业务 域名 ) 、TLS 版 


图 A-6 ” 跳 过 域名 校 验 设置 


可 视 化 数据 库 拾 建 


为 了 方便 对 MySQL 数据 库 的 操作 ,这 里 推荐 一 款 可 视 化 数据 库 工 具 软 件 Navicat for 
MySQL。 这 球 软 件 是 一 套 专 为 MySQL 设计 的 高 性 能 数据 库 管 理 及 开发 工具 ,支持 绝 大 部 分 
新 版 本 的 功能 。 


MySQL : 


这 里 假设 已 经 安装 完成 了 phpStudy 2016 套装 软件 并 已 经 启动 了 Apache 与 MySQL 服 
务 ( 安 装 和 启动 方式 见 “ 附 录 A”) ,Navicat for MySQL 工具 的 部 署 步骤 如 下 : 

(1) 下 载 安装 包 , 在 本 地 计算 机 中 双击 安装 。 

(2) 完成 后 启动 Navicat。 

(3) 单 击 左上 角 的 “连接 ”图 标 ( 如 图 B-1 所 示 ), 在 弹出 的 对 话 框 中 分 别 填 人 自 定 义 连接 


B-1 创建 数据 库 连 接 


B-2 填 入 数据 库 连接 信息 
注意 ,如 果 是 使 用 phpStudy 2016 套件 进行 安装 的 ,初始 用 户 名 和 密码 均 为 root。 完 成 后 


B-3 数据库 连 接 列表 


双击 连接 名 后 可 看 到 已 经 存在 的 数据 库 列表 ,可 以 新 建 自 定 义 名 称 的 数据 库 。 


在 连接 创建 并 激活 后 ,可 以 右 击 该 连接 ,选择 “新 建 数据 库 ” 命 令 , 如 图 B-4 所 示 。 


B-4 ”选择 “新 建 数 据 库 ” 命 令 


在 弹出 的 “新 建 数据 库 ” 对 话 框 中 填 入 自 定义 数据 库 名 称 news, 并 使 用 下 拉 列 表 选 择 字符 
集 utf8mb4--UTF-8 Unicode 和 排序 规则 utf8mb4_general_ci, 如 图 B-5 所 示 。 


B-5 “新 建 数据 库 ” 对 话 框 


单 击 “ 确 定 ” 按 钮 后 完成 数据 库 的 创建 ,双击 进入 数据 库 , 并 单 击 “ 表 ”一 “新 建 表 ”, 如 图 A-6 
所 示 。 


B-6 新 建 数据 表 


然后 根据 实际 需要 录 信 表 的 字段 名 称 、 类 型 长 度 等 信息 (如 图 B-7 所 示 ) ,保存 后 录入 数 
据 表 名 称 , 例 如 campus news。 


= 


| 量 测 只 位 图 插 和 位 加 出 S$ 栏 习 | 户主 | 全 上 各 最 T 闪 


Ls mh 了 = - 
ber irr | | 


B-7 创建 数据 表 字 段 信息 


/ 


I 


| Bs 和 ms 国 Su 千 汪 S | 国 ] 网 格 查 看 四至 可 看 | 门 名 注 E 


加 


二 六 进 制 加 图 像 | 竺 z 升序 排序 


title add_date 
“六 人 必 名 家 进 高 校 ” 专 场 袜 2018-06-14 
288276 舍 文联 - 文 tt 名 家 进 高 校 ” 2018-06-14 


288399 RF 2018-06-14 
是 部 署 毕业 生 文 明 高 ; 2018-06-15 


288505 [有 一 际 礼 2018-06-15 

记 友 学 与 安 烤 省 高 分 2018-06-15 
288550 学 术 学 行 实 答 师范 大 学 首 局 | 2018-06-15 
288553 “文化 名 家 进 高 校 ”活动 击 ; 2018-06-15 
288856 安徽 师 芝 大 学 后 勤 保障 : 从 2018-06-20 
288866 我 校 乒 乓 球 队 代 表 中 国 参 加 | 2018-06-20 
289038 我 校 尝 行 客座 教授 聘任 斜 雪 ' 2018-06-21 
289154 我 校 学 子 在 首 大 学 生 “ 创 青 : 2018-06-22 
289240 第 二 届 语 言 教学 与 研究 国际 : 2018-06-25 
289337 我 校 攻 居 教 职 工 气 排球 比赛 | 2018-06-25 
289511 【青春 毕业 地] 安徽 师 苑 大 : 2018-06-27 
301986 【运动 员 专访 ] 跑道 上 的 楚 ; 2018-10-29 
302308 我 校 在 全 国 首届 “图 书馆 杯 : 2018-10-31 


| 


SELECT * FROM campus news Ll 


poster content 

http:/ www.ahnu.edu.cnju 本 网 讯 (大千 
http://vwww,ahnu.edu.cnjfu 本 网 讯 { 美 直 
http://www.ahnu.edu.cnju 本 网 讯 近日 : 
http://www.ahnu.edu.cn/u 本 网 讯 { 组 旗 
http:/f /www.ahnu.edu.cn/u 本 网 讯 【 学 生 
httpyV/www.ahnu.edu.cnu 本 网 讯 ( 国 
http://www.ahnu.edu.cnju 正 值 安徽 师 革 
httpy/leycahnuedu.cnyup 本 网 讯 ( 科 事 
http:fjwww.ahnu.edu.cn/u 本 网 讯 ( 学 工 
https//www.ahnu.edu.cn/u 本 网 讯 ( 文学 
http:fAwww.ahnu.edu.cnf/u “我 们 诊室 萨 
http:jfjwww.ahnu.edu.cnju 本 网 讯 ( 体 亡 
http://www.ahnu.edu.cn/ju 本 网 讯 ( 地 部 
http:f/www.ahnu.edu.cn/u 青 通 社 讯 ( 尘 
httpV/woo-ahnu.edu.cmyur 本 网 讯 ( 文 党 
httpywww.ahnuedu.cnAu 二 网 讯 【 文 上 
http:/f/www.ahnu.edu.cn/u 本 网 讯 【 校 
http:f/www.ahnu.edu.cn/u 本 网 讯 (让 
http:/ /www,ahnu.edu.cn/u 本 网 讯 ( 图 证 


B-8 ”在 数据 表 中 录入 数据 
同一 个 数据 库 允许 创建 不 同名 称 的 多 张 数据 表 。 


| el 中 喇 江 | 
第 1 条 记录 ( 共 19 条 ) 于 1 页 | 


一 般 来 说 尽量 不 要 使 用 root 用 户 进行 后 端的 接口 制作 ,以 免 带 来 安全 隐患 ,可 以 创建 一 
个 独立 用 户 ,并 赋予 它 相关 数据 库 的 权限 。 
首先 单 击 顶 部 的 “用 户 ” 图 标 ,如 图 B-9 所 示 。 


| 安 任 查看 gl Mi J 肯 堆 品 


FonHT 


下 打开 表 【1 设计 过 四 新 建 表 03 种 除 表 国 导 入 向 导 国 | 导出 向 导 


| 。 2 phpstudy 
四 information_schema 


可 | he sthema 
Bl test 


B-9 单 击 用户” 图 标 


图 B-10 ” 单 击 “ 新 建 用 户 " 按 钮 


news_admin 
127.0.0.1 


B-11 切换 到 用 尸 管 理 面 板 


De 
[| 国 DD 


B-12 单 击 “ 添 加 权限 ”按钮 


在 弹出 的 "添加 权限 ”对话 框 中 勾 选 需要 赋 子 权限 的 数据 库 news 和 查询 权限 Select( 如 
图 B-13 所 示 ) ,然后 单 击 "确定 ”按钮 完成 。 


ee 


4a 看 phpStudy 
口 国 information_schema 
b> 口 图 mysql 
| 加 news 
口 国 performance_schema 
b 口 围 test 


B-13 “添加 权限 ”对 话 框 
然后 单 击 “ 保 存 ” 按 钮 完成 权限 分 配 ( 如 图 B-14 所 示 ) ,这 样 就 可 以 关闭 了 。 


了 可 me FE -i a 
dmin@127.0.( 1 (php: study) - 用 户 * 


Update Reference Delete Create Drop 
加 0 0 加 | 口 


B-14 保存 后 完成 权限 分 配 


后 痛 框 薪 拾 建 


小 程序 允许 对 接任 意 语言 开发 的 后 端 接口 ,例如 PHP、Node.js、JavaEE 等 。 用 户 可 以 根 
据 实 际 擅长 情况 任意 选择 一 款 进 行 后 端 开发 和 接口 的 制作 。 

对 于 初学 者 而 言 ,PHP 十 MySQL 相对 来 说 比较 容易 上 手 。 因 此 这 里 以 免费 开源 PHP 框 
架 ThinkPHP 3. 2. 4 为 例 , 说 明 如 何在 本 地 服务 器 进行 后 端 框架 的 部 署 和 接口 制作 。 


首先 将 提供 的 开源 框架 包 thinkphp_3. 2.4 整个 复制 .粘贴 到 phpStudy 的 WWW 目录 
下 ,并 将 其 重 命名 成 自 定义 名 称 , 例 如 myNews。 

在 确保 Apache 服务 已 经 启动 的 情况 下 ,使 用 浏览 颖 访问 “http://127. 0.0.1/myNews” 
或 “http://localhost/myNews” 来 安装 该 框架 。 当 看 到 欢迎 使 用 界面 (如 图 C-1 所 示 ) 时 表示 
安装 成 功 。 


欢迎 使 用 ThinkPHP ! 


版 本 V3.2.4 


C-1 欢迎 使 用 界面 


在 确保 Apache 和 MySQL 服务 已 经 启动 的 情况 下 ,找到 myNews 文件 夹 下 的 公共 配置 
文件 config. php( 路 径 地 址 为 Application/Common/Conf/config. php) ,用 文本 编辑 工具 打开 
进行 数据 库 对 接 配置 。 

参考 代码 如 下 : 

1. <?php 

2. return array( 

3. //' 配 置 项 ' =>' 配 置 值 ' 

4. 'DB_TYPE' = >'mysql", // 数 据 库 类 型 


5 'DB HOST' = >"'127.0.0.1", 

bs 'DB NAME' = >'news', 

A 'DB USER' =>'news admin', 

8 'DB PWD' = >'123456", 

9. 'DB PORT' = > 3306, 

10. 'DB PARAMS' = > array(), 

11. 'DB CHARSET' = >'utf8"', 

12. _'DB DEBUG' = > TRUE, 

13. 'MODULE ALLOW LIST' => array( 'Home'), 
14. 'DEFAULT MODULE' =>'Home', 

15.  'DEFAULT CONTROLLER' = > 'Index', 


// 服 务 硕 地 址 

// 数 据 库 名 称 

// 数 据 库 用 户 名 
// 数 据 库 密 码 

// 端 口号 

// 数 据 库 参数 

// 数 据 库 字符 集 
// 数 据 库 允许 debug 
// 人 允许 访问 的 模块 
// 坎 认 模 块 

// 先 认 控制 项 名 称 


请 根据 数据 库 的 实际 情况 修改 对 应 的 服务 带 地 址 、 数 据 库 名 称 、 用 户 名 、 密 码 、 端 口号 等 内 
容 ,使 其 能 够 与 服务 冀 进 行 对接 。 


然后 找到 框架 文件 来 myNews 中 的 控制 瘟 文 件 IndexController. class. php( 路 径 地 址 为 
Application/ Home/Controller/IndexController. class. php), 用 文本 编辑 器 打开 进行 代码 


例如 查询 数据 库 中 一 张 名 为 student 的 表 中 的 全 部 数据 : 


1. <?php 

2. namespace Home\Controller.; 

3. use Think\Controller; 

4. 

5. class IndexController extends Controller 

6. 1 

Ts public function getStulInfol( ){ 

8. sm = M(); // 创 建 查询 模型 

9. $Frs = $m->query('select * from student'); // 执 行 SQL 语句 并 获得 查询 结果 
10. echo json encode( $ rs); // 把 JSON 格式 数据 发 出 去 
1 ) 

12. } 


此 时 接口 就 制作 完成 了 ,其 中 畏 数 名 getStuInfo 为 日 定义 名 称 , 开 发 者 可 以 日 行 更 改 。 


接口 地 址 的 格式 如 下 : 


http:// 服 务 器 地 址 /框架 名 /控制 器 名 称 / 困 数 名 [/ 和 参数 1/ 值 1… /参数 N/ 值 N] 
因此 本 次 示例 的 接口 地 址 为 “http://127.0.0.1/myNews/Index/getStulInfo” 可 以 直接 使 


用 浏览 硕 进 行 测试 访问 ,并 且 宇 母 大 小 与 不 敏感 。 


接 下 来 示范 一 下 带 参 数 查 询 。 


例如 查询 数据 库 中 一 张 名 为 student 的 表 中 指定 革 学 号 id 的 学 生 数 据 : 


<?php 
namespace Home\Controller; 
use Think\Controller; 


WN 


{ 


class IndexController extends Controller 


FT. public function getStuById( ){ 


8. $id = I('id'); // 获 取 参 数 id 的 值 

9. $m = M(); // 创 建 查询 模型 

10. $rs = $m->query('select * from student where id= '. $id); // 获 得 查询 结果 
11. echo json encode( $ rs); // 把 JOSN 格式 数据 发 出 去 

和 } 

13. 1 


其 中 国 数 名 getStuById 为 日 定义 名 称 , 开 发 者 可 以 月 行 更 改 ，。 
此 时 接口 地 址 为 “http://127.0.0.1/myNews/Index/getStuBylId”, 如 果 想 使 用 浏览 器 进行 测 
试 访 问 , 带 参 数 示范 的 完整 地 址 为 “http://127. 0. 0. 1/myNews/ Indexy getStuById/id/123?”。 


个 人 开发 者 有 
场景 值 、 小 


个 人 开发 者 服务 类 目 如 表 D-1 所 示 。 
表 D-1 


一 级 分 类 


二 级 分 类 


务 类 目 以 及 小 程序 
序 预 定 颜色 


个 人 开发 者 服务 类 目 


快递 .物流 


是 三 由 
快递 业 与 邮政 a 


装 番 /搬运 
教育 信息 服务 
特殊 人 和 群 教育 
楼 幼儿 教育 
在 线 教育 
教育 站 备 


教育 


出 行 与 区 通 代 鸭 


生活 缴费 


生活 服务 外 送 


环保 回收 /废品 回收 


摄影 /扩印 
婚庆 服务 
点 评 与 推荐 


旅游 
记 账 
工具 


办 公 


图 片 / 音 


举 | 让 | 让 


厅 排 队 
旅游 攻略 
出 境 Wi-Fi 


裕 


必 | 洁 | 六 | 研 


频 / 视 频 


中 
二 


二 微 信 小 程序 开发 实战 - 微 课 视频 版 


续 表 
一 级 分 类 三 级 分 类 
T 有  W | -= 
法 律 咨询 
i 在 线 法 律 服务 
商业 服务 
一 般 财务 服务 WE 
农林 牧 渔 一 
5 在 线 健身 一 
注意 : 面向 个 人 开发 者 开放 的 服务 类 目 会 随 着 相关 政策 ,法 律 法 规 以 及 平台 规定 的 变化 而 变化 ,请 开发 者 以 提交 时 开 
放 的 类 目 为 准 , 本 文档 仅 供 参考 。 


小 程序 场景 值 如 表 D-2 所 示 。 
表 D-2 小 程序 场景 值 

场景 值 ID 说 明 

1001 发 现 栏 小 程序 主人 口 ， 最 近 使 用 ?列表 (从 基础 库 2. 2.4 版 本 起 将 包含 “我 的 小 程序 ”列表 ) 

1005 顶部 搜索 框 的 搜索 结果 页 

1006 发 现 栏 小 程序 主人 口 ,搜索 框 的 搜索 结果 页 

1007 单 人 聊天 会 话 中 的 小 程序 消息 卡片 

1008 群 聊 会 话 中 的 小 程序 消息 卡片 

1011 扫描 二 维 码 

1012 长 按 图 片 识别 二 维 码 

1013 手机 相册 选取 二 维 码 

1014 小 程序 模板 消 朋 

1017 前 往 体 验 版 的 入 口 页 

1019 微 信 钱包 

1020 公众 号 profile 页 相关 小 程序 列表 

1022 聊天 顶部 置顶 小 程序 人 口 

1023 安 盾 系统 香 面 图 标 

1024 小 程序 profile 页 

1025 扫描 一 维 公 

1026 附近 小 程序 列表 

1027 顶部 搜索 框 的 搜索 结果 页 , “使 用 过 的 小 程序 ”列表 

1028 我 的 卡 包 

1029 卡 券 详情 页 

1030 自动 化 测试 下 打开 小 程序 

1031 长 按 图 片 识别 一 维 码 


场景 值 ID 
1032 
1034 
1035 
1036 
1037 
1038 
1039 
1042 
1043 
1044 
1045 
1046 
1047 
1048 
1049 
1052 
1053 
1054 
1056 
1057 
1058 
1059 
1064 
1067 
1068 
1069 
1071 
1072 
1073 
1074 
1077 
1078 
1079 
1081 
1082 
1084 
1089 
1090 
1091 
1092 
1095 
1096 
1097 


续 表 


手机 相册 选取 一 维 码 

微 依 文 付 完成 页 
公众 号 自 定义 菜单 

App 分 享 消息 卡片 

小 程序 打开 小 程序 

从 男 一 个 小 程序 返回 

摇 电 视 

添加 好 友 搜 索 杠 的 搜索 结果 页 
公众 号 模板 消 县 

带 shareTicket 的 小 程序 消息 卡片 (详情 ) 
朋友 圈 广 告 

朋友 圈 广 告 详 情 页 

扫描 小 程序 码 

长 按 图 片 识 别 小 程序 码 

手机 相册 选取 小 程序 码 

卡 券 的 适用 门店 列表 

搜 一 搜 的 结果 页 

顶部 搜索 框 的 小 程序 快捷 入 口 
音乐 播放 器 全 单 

钱包 中 的 银行 卡 详情 页 
公众 号 文章 

体验 版 小 程序 绑 定 邀请 页 

微 信 连 Wi-Fi 状态 栏 
公众 号 文章 广告 
附近 小 程序 列表 广告 

移动 应 用 

钱包 中 的 银行 卡 列 表 页 

二 维 码 收 球 页 面 

客服 消息 列表 下 发 的 小 程序 消息 卡片 
公众 号 会 话 下 发 的 小 程序 消息 卡片 
摇 周 边 

连 Wi-Fi 成 功 页 

微 信 游戏 中 心 

客服 消息 下 发 的 文字 链 

公众 号 会 话 下 发 的 文字 链 
朋友 圈 广 告 原生 页 

微 信 聊 天 主 界面 下 拉 ,“ 最 近 使 用 ” 栏 (从 基础 库 2. 2. 4 版 本 起 将 包含 “我 的 小 程序 ” 栏 ) 
长 按 小 程序 右上 和 角 羔 单 唤 出 最 近 使 用 历史 
公众 号 文章 商品 卡片 

城市 服务 入 口 

小 程序 广告 组 件 

聊天 记录 

微 信 支付 签约 页 
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场景 值 ID 说 明 
1099 页 面 内 杉 插件 
1102 公众 号 profile 页 服务 预览 


1103 发 现 栏 小 程序 主 入 口 , “我 的 小 程序 ”列表 (从 基础 库 2. 2.4 版 本 起 废弃 ) 
1104 微 信和 聊天 主 界面 下 拉 , “我 的 小 程序 ” 栏 ( 从 基础 库 2. 2.4 版 本 起 废弃 ) 


小 程序 目前 预定 颜色 有 148 个 ,颜色 名 称 大 小 写 不 敏感 ,如 表 D-3 所 示 。 


表 D-3 小 程序 预定 颜色 


AntiqueWhite 250,235,215 


Chartreuse 127,255,0 
Chocolate 210,105,30 
Crimson #DC143C 


DarkBlue #00008B 0.0,139 


DarkOliveGreen 85,107,47 


DarkGoldenRod # B8860B 184,.134,1] 


DarkRed # 8B0000 139,0,0 
DarkSalmon # E9967A 233,150,122 


陶 坏 呐 
黑 色 
三 
蓝 色 
蓝 宗 色 
神色 
人 硬木 神 
军服 蓝 
查 特 酒 绿 
巧 到 力 色 
珊瑚 红 
和 天 车 菊 蓝 
绯 红 
育 色 
深 蓝 
深 再 
诛 金 菊 黄 
暗 灰 
暗 灰 
深 绿 
深 卡 其 色 
诛 ” 橙 
深 注 兰 紫 


DimGrrey 划 696969 105,105,105 
DodgerBlue # 1E90FF 30,144,255 
FireBrick # B22222 178,34,34 


Floral White #FFFAFO 255 .250 ,240 
GhostWhite # F8F8FF 248 ,248 ,255 
Gold # FFD700 255,215,0 
GoldenRod #DAA520 218,165,32 
Grey #808080 128,128,128 
Green #008000 0,128,0 


ForestGreen # 228B22 34,139,34 
Fuchsia FFOOFF 255,.0 255 
GreenYellow # ADFF2F 173,255,47 


Gainsboro # DCDCDC 220 ,220,220 


HoneyDew # FOFFFO0 240 ,255 ,240 
HotPink # FF69B4 255 ,105,180 
IndianRed # CD5C5C 205 ,92 ,92 
Indigo #4B0082 75,0,130 
Khaki # FOE68C 240 ,230,140 


Lavender # E6E6FA 230,230,250 


LavenderBlush 井下 FFEOF5 255 ,240 ,245 


Gray #808080 1l128,128,128 
lvory # FFFFFO 295993295,240 


LawnGreen 井 7CFC00 
LightCyan # EOFFFF 
LightGoldenRodYellow 
LightSeaGreen 32,178,170 


中 文 名 
深海 藻 绿 
深 岩 蓝 
深 岩 灰 
深 岩 灰 
深 松石 绿 
深 此 
深 粉 
深 天 蓝 
锚 灰 
锚 灰 
湖 蓝 
火 砖 红 
花卉 白 
森林 绿 
洋红 
庚 氏 灰 
幽灵 白 
金 色 
金 菊 黄 
灰 色 
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颜色 名 称 


LightSkyBlue 
LightSlateGray 
LightSlateGrey 
LightSteelBlue 
Light Yellow 
Lime 
LimeGreen 
Linen 

Magenta 


Maroon 


Medium AquaMarine 


MediumBlue 
MediumQOrchid 
MediumPurple 


MediumseaGreen 
MediumslateBlue 
MediumSpringGreen 
Medium Turquoise 
Medium VioletRed 


MidmghtBlue 
MintCream 
MistyRose 
Moccasin 
NavajJoW hite 
Navy 

OldLace 

live 
OliveDrab 
Orange 
DrangeRed 
Orchid 
PaleGoldenRod 
Pale(sreen 
PaleTurquoise 
PaleVioletRed 
PapayaWhip 
PeachPutf 
Peru 

Pink 

Plum 
PowderBlue 
Purple 
RebeccaPurple 


#87CEFA 135.206,250 
#778899 119,136,153 


#778899 119,136,153 
# BOC4DE 176 ,196,222 


RGB 十 六 进 制 RGB 十 进 制 


#9370DB 147,112,219 
# 3CB371 60,179.113 


#00FF00 0,255,0 
#66CDAA 102,205,170 
#0000CD 0,0,205 
#7B68EE 123,104,238 


#00FA9A 0,250,154 
#48D1CC 72,209,204 
井 191970 25 ,25 ,112 


井 BA55D3 186.85,211 
井 C71585 199 ,21 .133 
#F5FFFA 245 ,255,250 
# FFE4El1 255 ,228 ,225 
# FFE4B5 255 ,228,18]1 
# FFDEAD 255 ,222 ,173 
井 000080 0,0,128 


AD 


# FDFS5E6 253,245 ,230 


# BOEOES 176 ,224,230 


中 政 绿 
中 蓝 
中 详 兰 此 
中 紫 
中 海藻 绿 
中 岩 蓝 
中 嫩绿 
中 松石 绿 
中 紫红 
午夜 蓝 
薄荷 乳白 
雾 玫瑰 红 
讶 皮 色 
土著 白 
藏 青 
旧 壳 丝 日 
橄榄 色 
橄榄 绿 
由 色 
橘红 
洋 兰 紫 
白金 菊 黄 
白 绿色 
白松 石 绿 
白 紫 红 
番 木 瓜 橙 
粉扑 桃色 
秘鲁 红 
粉 色 
李 紫 
粉末 蓝 
紫 色 
丽 贝 卡 紫 
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续 表 
区 红 在 
Siva 最 所 
Ta 两 
We 去 所 
wii 
WhiteSmoke 和 
Yalow 页 外 


注意 : RebeccaPurple 是 CSS Level 4 中 的 一 种 新 颜色 ,是 Web Community 全 体 成 员 以 队友 Eric 去 世 的 女儿 Rebecca 
命名 的 ,以 此 来 支持 他 


